/*  /public/styles/site-style.css  */

    /********************************************** * 1) ROOT & BODY **********************************************/
    :root { --bannercolor:#4D1A93; --fadebannercolor:#8C5DC7 }
    html, body, button, input, select, textarea { font-family:Nunito, sans-serif; margin:0; padding:0; color: #444; }
    *, *:before, *:after { box-sizing: border-box; }

    hr { height:1px; border:none; background:#ccc; margin:0.5rem 0 }

    /********************************************** * 2) BASIC UTILITIES (DISPLAY, TEXT, SPACING) **********************************************/
    /* Visibility & text transformation */

    .uppercase { text-transform:uppercase }
    .font-bold { font-weight: 700; }
    .w720 {max-width:720px;}
    .w400 {max-width:400px;}
    .dis-b {display:block;}
    .bold {font-weight:bold;}
    .well { background-color:#f5f5f5; border:1px solid #e3e3e3; padding:15px; border-radius:4px; box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05) }
    .box { border:1px solid #ccc; }

    /* Text coloring & sizing */
    .text-3xl { font-size: 1.875rem; }
    .text-gray { color:#374151 }
    .text-sm { font-size:0.875rem }
    .text-white { --text-opacity:1; color:#fff; color:rgba(255, 255, 255, var(--text-opacity)) }
    .text-black { --text-opacity:1; color:#000; color:rgba(0, 0, 0, var(--text-opacity)) }
    .text-gray-600 {color: #4B5563;}
    .text-gray-700 { --text-opacity:1; color:#4a5568; color:rgba(74, 85, 104, var(--text-opacity)) }

    /* Cursors & positioning */
    .cursor-pointer { cursor:pointer }
    .relative { position:relative }

    /* Rounding & spacing */
    .rounded { border-radius:0.25rem }
    .rounded-md { border-radius:0.375rem }
    .mb-2 { margin-bottom:0.5rem }
    .mb-6px { margin-bottom:6px; }

    /* Width & height */
    .w-8 { width:2rem }
    .w-26px { width: 26px;}
    .w-30px { width: 30px;}
    .w-32px { width: 32px;}
    .w-50px { width: 50px;}
    .h-1 { height:0.25rem }
    .h-12 { height:3rem }
    .h-16 { height:4rem }
    .h-26px { height: 26px;}
    .h-30px { height: 30px;}
    .h-32px { height: 32px;}


    .display-block {display:block;}

    /* Padding & margin utilities */
    .mb-0 { margin-bottom:0 }
    .mb-1 { margin-bottom:0.25rem }
    .mb-2 { margin-bottom:0.5rem }
    .mb-4 { margin-bottom:1rem }
    .mb-6 { margin-bottom:1.5rem }
    .mb-12 { margin-bottom: 3rem; }
    .mb-4px  { margin-bottom: 4px; }
    .mx-auto { margin-left:auto; margin-right:auto }
    .mx-2 { margin-left:0.5rem; margin-right:0.5rem }
    .mx-4 { margin-left:1rem; margin-right:1rem }
    .mr-4 { margin-right:1rem }
    .ml-2 { margin-left: 0.5rem;}
    .ml-4 { margin-left:1rem }
    .mt-0 { margin-top:0 }
    .mt-1 { margin-top:0.25rem }
    .mt-2 { margin-top:0.5rem }
    .mt-3 { margin-top:0.75rem }
    .mt-4 { margin-top:1rem }
    .mt-6 { margin-top:1.5rem }
    .mt-60px { margin-top:60px}
    .mr-1 { margin-right:0.25rem }
    .ml-1 { margin-left:0.25rem }
    .py-4 { padding-top:1rem; padding-bottom:1rem }
    .py-12 { padding-top:48px; padding-bottom:3rem }
    .py-2 { padding-top:0.5rem; padding-bottom:0.5rem }
    .p-4 { padding:1rem }
    .p-0 { padding:0 }
    .pl-6 { padding-left:1.5rem }
    .px-4 { padding-left:1rem; padding-right:1rem }

    /* small grey text for OGL notice */
    .small-gray-text {color:#aaa; font-size:0.8em; font-style:italic;}

    /* List & block */
    .list-bare { padding-left:0; margin-bottom:0; list-style-type:none }
    .block { display:block }
    .inline-block { display:inline-block }
    .no-underline { text-decoration:none }
    a.hover-no-underline:hover { text-decoration:none }

    /* Overflow & layout */
    .overflow-hidden { overflow:hidden }
    .flex { display:flex }
    .flex-col { flex-direction:column }
    .flex-1 { flex:1 1 0% }
    .items-center { align-items:center }
    .clearfix::after { display:block; content:""; clear:both }
    .float-left { float:left }
    .float-right { float:right }
    .clear-both {clear:both}

    /* Positioning & z-index */
    .sticky { position:sticky }
    .top-0 { top:0 }
    .right-0 { right:0 }
    .z-10 { z-index:10 }
    .absolute { position:absolute }
    .text-center { text-align: center }


    /* Sizing & screens */
    .max-h-screen { max-height:100vh }
    .w-full { width:100% }

    /* Logo */
    .logo { height: auto; max-width: 216px; width: 100%; }
    @media (max-width: 480px) {
      .logo { max-width: 170px; }
    }

    #achievementsDrawerHtml {display:none;}

    /********************************************** * BUTTONS & ANCHORS **********************************************/
    a { color:#1f5fbf; text-decoration:none !important; overflow-wrap:break-word; word-break:normal; hyphens:auto; white-space:normal }    /* Remove all button styling */
    .btn-reset { appearance:none; -webkit-appearance:none; background:transparent; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit; color:inherit; line-height:1 }

/* ── Palette & design tokens (add once near top of your CSS) ───────── */
:root{
  /* brand + accents */
  --c-brand       : #4D1A93;  /* banner + primary fill */
  --c-brand-light : #8855BE;  /* your existing hover tint */
  --c-brand-dark  : #3A1173;  /* active/pressed */
  --c-brand-faint : #F2EAFE;  /* 95 % tint; future outline bg */

  /* Stacking order */
  --z-floating-action: 7000;
  --z-cookie-banner: 8000;
  --z-popover: 8500;
  --z-modal-backdrop: 9000;
  --z-modal: 9010;
  --z-modal-control: 9020;
  --z-debug-overlay: 7500;

  /* action / success */
  --c-action      : #2A9C5A;
  --c-action-dark : #23814B;

  /* neutrals */
  --c-grey        : #777;
  --c-grey-light  : #eee;

  /* shared button metrics */
  --btn-radius    : 8px;              /* match your 0.5rem */
  --btn-pad       : 1rem 1.5rem;      /* same as before */
  --btn-font      : 16px/1.2 "Inter", sans-serif;
}

/* ── Base button (unchanged, just swap literal values for vars) ───── */
.btn{
  font: var(--btn-font);
  display:inline-block;
  border:1px solid transparent;
  border-radius:var(--btn-radius);
  padding:var(--btn-pad);
  font-weight:400;
  white-space:nowrap;
  transition:background-color .3s,border-color .3s,color .3s,transform .3s;
  text-align:center;
}


/* ── Primary (brand) button - same behaviour, now uses vars ───────── */
.btn-primary{
  min-width:140px;text-align:center;
  background:var(--c-brand);
  color:#fff;
}
.btn-primary:hover{background:var(--c-brand-light);}
.btn-primary:focus{outline:none;box-shadow:0 0 0 3px rgba(77,26,147,.5);}
.btn-primary:active{background:var(--c-brand-dark);transform:scale(.98);}
.btn-primary:disabled{
  background:var(--c-brand-light);
  color:rgba(255,255,255,.5);
  cursor:not-allowed;
}

/* ── variants  ───────────────── */
/* outline secondary */
.btn-default{
  background:var(--c-brand-faint);
  color:var(--c-brand);
}
.btn-default:hover{background:var(--c-brand-faint); 
  border-color:var(--c-brand-dark);
  color:var(--c-brand-dark);}

.btn-rmd-trigger{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
  text-align:left;
}

.btn-rmd-trigger__icon{
  display:inline-block;
  vertical-align:text-top;
  margin-right:0.5rem;
  position:relative;
  top:-4px;
}

.btn-rmd-trigger__label{
  display:inline;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Cookie consent surfaces */
.cookie-banner{
  position:fixed;
  left:clamp(12px, 3vw, 24px);
  right:clamp(12px, 3vw, 24px);
  bottom:clamp(12px, 3vw, 24px);
  z-index:var(--z-cookie-banner);
  pointer-events:none;
}
.cookie-banner__panel{
  position:relative;
  width:min(100%, 760px);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  border:1px solid #d7c9ee;
  border-radius:18px;
  background:linear-gradient(135deg, #ffffff 0%, #fbf8ff 58%, #f5f8ff 100%);
  box-shadow:0 0 0 1px rgba(25, 35, 52, 0.08), 0 12px 32px rgba(17, 24, 39, 0.24), 0 0 28px rgba(17, 24, 39, 0.16);
  color:#20324b;
  overflow:hidden;
  pointer-events:auto;
  animation:cookie-banner-enter .26s ease-out both;
}
.cookie-banner__panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg, var(--c-brand, #4D1A93) 0%, var(--fadebannercolor, #8C5DC7) 100%);
}
.cookie-banner__badge{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  flex:0 0 56px;
  background:
    radial-gradient(circle at 36% 33%, rgba(255,255,255,0.92) 0 3px, transparent 3.2px),
    radial-gradient(circle at 62% 38%, rgba(255,255,255,0.92) 0 2.6px, transparent 2.9px),
    radial-gradient(circle at 44% 62%, rgba(255,255,255,0.92) 0 3.1px, transparent 3.4px),
    radial-gradient(circle at 68% 66%, rgba(255,255,255,0.92) 0 2.4px, transparent 2.8px),
    linear-gradient(135deg, #8c5dc7 0%, #4d1a93 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 18px rgba(77, 26, 147, 0.2);
}
.cookie-banner__badge::after{
  content:"";
  position:absolute;
  top:7px;
  right:-1px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#ffffff;
}
.cookie-banner__content{
  min-width:0;
}
.cookie-banner__eyebrow{
  margin:0 0 6px;
  font-size:0.74rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--c-brand, #4D1A93);
}
.cookie-banner__title{
  margin:0 0 8px;
  font-size:1.2rem;
  line-height:1.2;
  color:#20324b;
}
.cookie-banner__text{
  margin:0;
  color:#53657e;
  line-height:1.55;
}
.cookie-banner__link{
  display:inline-block;
  margin-top:10px;
  font-weight:700;
  color:var(--c-brand, #4D1A93);
  text-decoration:underline !important;
  text-underline-offset:3px;
}
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.cookie-banner__button{
  min-width:168px;
}

.cookie-preferences{
  max-width:620px;
}
.cookie-preferences__fieldset{
  margin:0;
  padding:22px;
  border:1px solid #dbe3ee;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow:0 12px 30px rgba(25, 35, 52, 0.05);
}
.cookie-preferences__legend{
  padding:0 8px;
  font-size:1.1rem;
  line-height:1.2;
  font-weight:700;
  color:#20324b;
}
.cookie-preferences__intro{
  margin:10px 0 18px;
  color:#607186;
  line-height:1.55;
}
.cookie-preferences__options{
  display:grid;
  gap:12px;
}
.cookie-preferences__option{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 15px;
  border:1px solid #e1e8f1;
  border-radius:14px;
  background:#ffffff;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.cookie-preferences__option:hover{
  border-color:#cfd9e7;
  background:#fcfdff;
  transform:translateY(-1px);
}
.cookie-preferences__option.is-selected{
  border-color:#cbb8ea;
  background:#f7f1ff;
  box-shadow:0 0 0 3px rgba(77, 26, 147, 0.08);
}
.cookie-preferences__option input{
  margin-top:3px;
  accent-color:var(--c-brand, #4D1A93);
}
.cookie-preferences__option-title{
  display:block;
  font-weight:700;
  color:#20324b;
}
.cookie-preferences__option-copy{
  display:block;
  margin-top:4px;
  color:#607186;
  line-height:1.5;
}
.cookie-preferences__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.cookie-preferences__submit{
  min-width:190px;
}
.cookie-preferences__message{
  min-height:1.5em;
  margin-top:12px;
  color:#1f7a42;
  font-size:0.95rem;
  opacity:0;
  transition:opacity .2s ease;
}
.cookie-preferences__message.is-visible{
  opacity:1;
}

@keyframes cookie-banner-enter{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:720px) {
  .cookie-banner__panel{
    grid-template-columns:auto 1fr;
    gap:16px;
    padding:18px;
  }
  .cookie-banner__actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    width:100%;
  }
}

@media (max-width:560px) {
  .cookie-banner{
    left:8px;
    right:8px;
    bottom:8px;
  }
  .cookie-banner__panel{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px 13px 13px;
    border-radius:12px;
  }
  .cookie-banner__badge{
    display:none;
  }
  .cookie-banner__panel::before{
    width:4px;
  }
  .cookie-banner__eyebrow{
    display:none;
  }
  .cookie-banner__title{
    margin-bottom:5px;
    padding-right:7rem;
    font-size:1rem;
  }
  .cookie-banner__text{
    font-size:0.9rem;
    line-height:1.35;
  }
  .cookie-banner__link{
    position:absolute;
    top:12px;
    right:13px;
    margin-top:0;
    font-size:0.9rem;
    line-height:1.2;
  }
  .cookie-banner__actions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:8px;
  }
  .cookie-banner__button{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:8px 10px;
    font-size:0.9rem;
    line-height:1.15;
    white-space:normal;
  }
  .cookie-preferences__submit{
    width:100%;
    min-width:0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner__panel,
  .cookie-preferences__option,
  .cookie-preferences__message{
    animation:none;
    transition:none;
  }

  .user-page-error-report__send-btn{
    transition:none;
  }

  .user-page-error-report__send-btn[data-state="sending"]::after{
    animation:none;
  }
}

@media (max-width:768px) {
  .btn-rmd-trigger{
    padding-right:1rem;
  }

  .user-page-error-report__send-btn{
    width:100%;
    min-width:0;
  }

  .user-page-error-report__charcount{
    width:100%;
  }
}

/* action / save */
.btn-action{
  background:var(--c-action);
  color:#fff;
}
.btn-action:hover{background:var(--c-action-dark);}
.btn-action:disabled{background:var(--c-action-dark);opacity:.6}

.user-page-error-report__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:.75rem;
}

.user-page-error-report__send-btn{
  --error-report-progress:0;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16rem;
  min-height:2.75rem;
  padding:.7rem 1.1rem;
  border:1px solid #d4c7e8;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      rgba(136, 85, 190, .28) 0 calc(var(--error-report-progress) * 100%),
      #f7f2fc calc(var(--error-report-progress) * 100%) 100%
    );
  color:var(--c-brand-dark);
  font:600 .96rem/1.2 Nunito, sans-serif;
  letter-spacing:.01em;
  transition:background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}

.user-page-error-report__send-btn:disabled{
  opacity:1;
}

.user-page-error-report__send-btn[data-state="empty"]{
  border-color:#ddd3ea;
  color:#6a5b82;
}

.user-page-error-report__send-btn[data-state="typing"]{
  border-color:#b79fda;
  color:var(--c-brand-dark);
  box-shadow:inset 0 0 0 1px rgba(136, 85, 190, .08);
}

.user-page-error-report__send-btn[data-state="ready"]{
  background:var(--c-action);
  border-color:var(--c-action-dark);
  color:#fff;
  box-shadow:0 10px 20px rgba(42, 156, 90, .18);
}

.user-page-error-report__send-btn[data-state="ready"]:hover:not(:disabled){
  background:var(--c-action-dark);
  transform:translateY(-1px);
}

.user-page-error-report__send-btn[data-state="ready"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(42, 156, 90, .22), 0 10px 20px rgba(42, 156, 90, .18);
}

.user-page-error-report__send-btn[data-state="sending"]{
  background:var(--c-brand-dark);
  border-color:var(--c-brand-dark);
  color:#fff;
  box-shadow:none;
}

.user-page-error-report__send-btn[data-state="sending"]::after{
  content:"";
  width:.95rem;
  height:.95rem;
  margin-left:.55rem;
  border:2px solid rgba(255, 255, 255, .35);
  border-top-color:#fff;
  border-radius:50%;
  animation:error-report-spin .8s linear infinite;
}

.user-page-error-report__charcount{
  font-size:.95rem;
  color:#5c516f;
}

.user-page-error-report__charcount[data-state="typing"]{
  color:var(--c-brand-dark);
}

.user-page-error-report__charcount[data-state="ready"]{
  color:var(--c-action-dark);
  font-weight:700;
}

.user-page-error-report__status{
  margin-top:.55rem;
  font-size:.95em;
}

@keyframes error-report-spin{
  to{transform:rotate(360deg);}
}

/* ghost */
.btn-ghost{background:transparent;color:var(--c-brand);}
.btn-ghost:hover{text-decoration:underline;color:var(--c-brand-light);}

/* cancel */
.btn-cancel{
  background:var(--c-grey-light);
  color:var(--c-grey);
}
.btn-cancel:hover{background:#ddd;color:#555;}


    /* base class */
    .xxbtn {font-size:1em; border: 1px solid transparent; white-space: nowrap; font-weight: 400; display: inline-block; border-radius: 0.5rem; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 300ms; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem;}
    /* reduce vertical padding only: class="btn btn-default btn-medium" */
    .btn-medium { padding-top: 5px; padding-bottom: 5px;}
    .btn-small { font-size: 11pt; padding: 5px 10px 5px 10px;}
    .btn-tiny { font-size: 9pt; padding: 2px 3px 2px 3px;}

    /* Button variations */    
    .xxxbtn-default {--bg-opacity: 1; background-color: #e0e0ff; --text-opacity: 1; color: #2a4365; color: rgba(42, 67, 101, var(--text-opacity)); }
    .xxxbtn-default:hover {--bg-opacity: 1; background-color: #f0f0ff; text-decoration: none; border:1px solid #ccc;}
    .xxxbtn-default:focus {outline: none; box-shadow: 0 0 0 3px rgba(224, 224, 255, 0.5);}
    .xxxbtn-default:active {background-color: #d0d0ff; transform: scale(0.98);}
    .xxxbtn-default:disabled {background-color: #f0f0ff; color: rgba(42, 67, 101, 0.5); cursor: not-allowed;}

    .xxxbtn-primary {min-width:140px; text-align:center;} /* To cope with text change to "Processing" */
    .xxxbtn-primary {background-color: #4D1A93; color: #fff; --bg-opacity: 1; --text-opacity: 1; color: rgba(255, 255, 255, var(--text-opacity));}
    .xxxbtn-primary:hover {--bg-opacity: 1; background-color: #8855BE; color: rgba(255, 255, 255, var(--text-opacity));}
    .xxxbtn-primary:focus {outline: none; box-shadow: 0 0 0 3px rgba(77, 26, 147, 0.5);}
    .xxxbtn-primary:active {background-color: #3A1173; transform: scale(0.98);}
    .xxxbtn-primary:disabled {background-color: #8855BE; color: rgba(255, 255, 255, 0.5); cursor: not-allowed;}
    
    
    /* Arrow Toggle Buttons class */
    .arrow-toggle { cursor:pointer; position:relative }
    .arrow-toggle::after { content:"▼"; margin-left:0.5em }
    .arrow-toggle.expanded::after { content:"▲" }
    /* Lucide Icon Prefixes */
    [class^="btn-lucide-"] { position: relative; padding-left: 2rem; }

    /* Prev Next buttons */
    .lg-mb-0 { margin-bottom:0 }
    .lg-max-w-sm { max-width:24rem }
    @media (min-width:640px) {.sm-w-auto { width:auto } .sm-float-right { float:right } }
    @media (min-width:640px) {.next-prev .btn { max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }}

    .btn-waiting {
      position: relative;
      pointer-events: none;
    }
    
    .btn-waiting .spinner {
      border: 2px solid #fff;
      border-top: 2px solid transparent;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      display: inline-block;
      animation: spin 0.8s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }    

    .scenario-show:focus-visible {
      outline: none; /* remove default blue outline */
      box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2e8b57; /* white inner + green outer ring */
      border-radius: 4px; /* optional: soften corners */
    }

    /********************************************** * 3) COLORS & BACKGROUNDS **********************************************/
    .bg-gray { background-color:#374151 }
    .bg-gray-100 { --bg-opacity:1; background-color:#f7fafc; background-color:rgba(247, 250, 252, var(--bg-opacity)) }
    .bg-gray-200 { --bg-opacity:1; background-color:#edf2f7; background-color:rgba(237, 242, 247, var(--bg-opacity)) }
    .bg-gray-500 { --bg-opacity:1; background-color:#a0aec0; background-color:rgba(160, 174, 192, var(--bg-opacity)) }
    .bg-gray-700 { --bg-opacity:1; background-color:#4a5568; background-color:rgba(74, 85, 104, var(--bg-opacity)) }
    .bg-white { --bg-opacity:1; background-color:#fff; background-color:rgba(255, 255, 255, var(--bg-opacity)) }
    .bg-transparent { background-color:transparent }
    /********************************************** * 4) BORDERS **********************************************/
    .border-0 { border:0 }
    .border-b-2 { border-bottom-width:2px; border-bottom-style: solid; }
    .border-gray-200 { border-color:#0df2f7; ) }
    /********************************************** * 5) TRANSFORMS & TRANSITIONS **********************************************/
    /* Transform origins & durations */
    .origin-center { transform-origin:center }
    .duration-200 { transition-duration:200ms }
    .duration-300 { transition-duration:300ms }
    .transition { transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform }
    /* For certain translate or rotate classes */
    .-translate-y-3 { --transform-translate-y:-0.75rem }
    /********************************************** * 6) SPECIAL HOVER UTILITIES **********************************************/
    .hover\:text-blue-200:hover { color:#bee3f8 }
    .hover\:bg-dark-blue:hover { background-color:#4D1A93 }
    .hover\:text-white:hover { --text-opacity:1; color:#fff; color:rgba(255, 255, 255, var(--text-opacity)) }
    /********************************************** * 7) OTHER HELPER CLASSES **********************************************/
    .shadow-md { box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) } 
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0 }
    .focus\:not-sr-only:focus { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal }
    .skip-link:focus {
      position:fixed !important;
      top:8px;
      left:8px;
      z-index:var(--z-modal-control);
      display:inline-block;
      width:auto;
      height:auto;
      margin:0;
      padding:10px 14px;
      clip:auto !important;
      overflow:visible;
      white-space:normal;
      border-radius:6px;
      background:#fff;
      color:#111;
      box-shadow:0 0 0 3px #005fcc, 0 8px 24px rgba(0,0,0,.22);
      font-weight:700;
    }
    #story-content:focus { outline:none; }
    :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
      outline:3px solid #005fcc !important;
      outline-offset:3px;
    }



    /*********** * 2) HAMBURGER MENU ICON & ANIMATION ************************************************/
    /* Container holding the bars + text */
    #main-menu-toggle-icon { float:right; display:inline-flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none }
    /* The "MENU" / "CLOSE" text below the bars */
    .menu-icon-text { margin-top:0.5rem }
    /* Transition for each bar */
    .menu-toggle-container div { transition:transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; transform-origin:center }
    /* Default text is "MENU" */
    .menu-icon-text::after { transition:opacity 0.3s ease, color 0.3s ease; content:"MENU"; display:block }
    /* Transform bars into an X when the menu button is expanded */
    #main-menu-toggle-icon[aria-expanded="true"] #toggle-bar-1 { transform:translateY(5px) rotate(45deg) }
    #main-menu-toggle-icon[aria-expanded="true"] #toggle-bar-2 { transform:translateY(-7px) rotate(-45deg) }
    #main-menu-toggle-icon[aria-expanded="true"] .menu-icon-text::after { content:"CLOSE" }
    /* Hover effect on bars + text:turn them blue */
    #main-menu-toggle-icon:hover .menu-toggle-container div { background-color:blue }
    #main-menu-toggle-icon:hover .menu-icon-text::after { color:blue }
    #main-menu .menu-close { xdisplay:none; z-index: 6;  position:absolute; top:12px; right:16px; font-size:2rem; line-height:1; background:none; border:0; color:#444; cursor:pointer; z-index:2 }
    /* when the menu gains the .show class (your JS toggles this) */
    #main-menu.show .menu-close { z-index: 6; display:block }

    /* 1) reset list styling */
    .menu-list { list-style:none; margin:0; padding:0 }
    /* 2) make each <li> fill the width, and add subtle bottom borders */
    .menu-list li { width:100%; border-bottom:1px solid rgba(0, 0, 0, 0.1) }
    /* 3) remove border under the last item */
    .menu-list li:last-child { border-bottom:none }
    /* 4) ensure the <a> is a block so it fills the li */
    .menu-list a { display:block; padding:0.75rem 1rem; text-decoration:none; color:inherit; transition:background-color 0.2s ease }
    /* 5) hover state */
    .menu-list a:hover { background-color:rgba(0, 0, 0, 0.05) }
    
    /* MAIN MENU PANEL (DROPDOWN NAV) */
    #main-menu { width:95%; margin:auto; z-index: 30; position:absolute; top:5px; left:16px; right:16px; background:#f8f8f8; border:1px solid #ccc; border-radius:8px; padding:0rem; box-shadow:0 2px 6px rgba(0, 0, 0, 0.1); opacity:0; transform:translateY(-10px); pointer-events:none; transition:transform 0.3s ease, opacity 0.3s ease }
    #main-menu.show { opacity:1; transform:translateY(0); pointer-events:auto }

    /*********** * 3) MOBILE SEARCH ICON (TRIGGER) HOVER ************************************************/
    /* Icon & text (inside the <button>) for mobile search trigger */
    .search-icon-mobile button svg { stroke:#374151; transition:stroke 0.3s ease }
    .search-icon-mobile button span { color:#374151; transition:color 0.3s ease }
    /* Hover => turn both icon & text blue */
    .search-icon-mobile button:hover svg { stroke:blue }
    .search-icon-mobile button:hover span { color:blue; }

     /*********** * 3)LOGIN LOGOUT ICON HOVER ************************************************/   
    /* Icon & text for login button */
    #log-in-icon svg, #log-out-icon svg { stroke:#374151; transition:stroke 0.3s ease }
    #log-in-icon span, #log-out-icon span { color:#374151; transition:color 0.3s ease }
    /* Hover => turn both icon & text blue */
    #log-in-icon:hover svg, #log-out-icon:hover svg { stroke:blue }
    #log-in-icon:hover span, #log-out-icon:hover span { color:blue }

    /*********** * 4) GENERAL .hover-blue CLASS FOR ICONS ************************************************/
    /* For Lucide icons that should turn blue on hover */
    .hover-blue svg { stroke:#374151; transition:stroke 0.3s ease, fill 0.3s ease }
    .hover-blue:hover svg { stroke:blue;}
    .lucide-20 {width:20px; display:inline-block; padding-bottom:3px;; color:#ccc;}
    .lucide-20-dark {width:20px; display:inline-block; vertical-align:-6px; color:#666;}
    .lucide-20-white {width:20px; display:inline-block; color:#fff;}
    .lucide-subtitle-icon {display:inline-block; vertical-align:middle; stroke-width:2; color:aqua;}

    /*********** * 6) PAGE CONTAINER + TOP BANNER ************************************************/
    .container { max-width:1280px; margin:0 auto; padding:0 16px; position:relative }
    .top-banner { display:flex; align-items:center; justify-content:space-between; padding:16px 0 }
    /* Remove outline/border on focus for the desktop search input */
    #txtBannerSearchBox:focus { outline:none; border:none }
    #txtBannerSearchBox::placeholder {font-style: italic;}
    /*********** * 7) MOBILE SEARCH ICON:LAYOUT ************************************************/
    /* (Hides on desktop, shown on mobile with media query) */
    .search-icon-mobile { display:none; border:0px solid #ccc }
    /* The wrapper inside that holds the icon + text stacked */
    .search-icon-mobile .search-icon-wrapper { display:flex; flex-direction:column; align-items:center }

    /*********** * 8) DESKTOP SEARCH BOX ************************************************/
    .search-pc { display:flex; align-items:center; justify-content:space-between; border:1px solid #ccc; padding:6px; border-radius:22px; width:350px !important; margin-left:-100px }
    .search-pc input { border:none; margin:0; padding:2px; width:100%; flex:1; font-size:1em; }

    /*********** * 9) MOBILE SEARCH PANEL (SLIDE-DOWN) ************************************************/
    #mobile-search-panel {  z-index: 10; position:absolute; top:5px; left:16px; right:16px; background:#f8f8f8; border:1px solid #ccc; border-radius:8px; padding:1rem; box-shadow:0 2px 6px rgba(0, 0, 0, 0.1); opacity:0; transform:translateY(-10px); pointer-events:none; transition:transform 0.3s ease, opacity 0.3s ease }
    #mobile-search-panel.show { opacity:1; transform:translateY(0); pointer-events:auto }
    /* The container for the mobile search input & button inside the panel */
    .mobile-search-box { display:flex; align-items:center; border:1px solid #ccc; border-radius:22px; padding:6px; margin-top:0.5rem; background-color:#fff }
    .mobile-search-box input { flex:1; border:none; outline:none; background-color:#fff; font-size:1em; }
    .mobile-search-box input::placeholder {font-style: italic;}
    .search-pc:focus-within, .mobile-search-box:focus-within { border-color:#005fcc; box-shadow:0 0 0 3px rgba(0, 95, 204, .22) }
    #mobile-search-close-button {position:absolute; top:8px; right:8px; cursor:pointer; background:transparent; border:0; font-size:1.2rem; line-height:1;}

    /*********** * 10) RESPONSIVE MEDIA QUERIES. TOP LINE  ********************************************/
    @media (max-width:768px) {
      .search-icon-mobile { display:block }
      .search-pc { display:none }
      /* Center the logo in the .top-banner */
      .top-banner picture { margin:0 auto }
    }

    /*********** * PURPLE BANNER ************************************************/
    .gradient-banner { background: linear-gradient(to right, var(--bannercolor), var(--fadebannercolor) ); }
    .page-title-banner__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .page-title-banner__text { min-width:0; }
    .beta-notice-trigger { flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; max-width:240px; padding:10px 12px; border:1px solid rgba(255, 255, 255, 0.75); border-radius:8px; background:#fff; color:#35165f; box-shadow:0 8px 18px rgba(0, 0, 0, 0.16); cursor:pointer; text-align:left; font:700 0.95rem/1.15 Nunito, Arial, sans-serif; }
    .beta-notice-trigger:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(0, 0, 0, 0.2); }
    .beta-notice-trigger:focus-visible { outline:3px solid #00e5ff; outline-offset:3px; }
    .beta-notice-trigger__icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#f0e7ff; color:#4D1A93; }
    .beta-notice-trigger__icon svg { width:22px; height:22px; stroke-width:2.5; }
    .beta-notice-trigger__copy { display:flex; flex-direction:column; gap:2px; }
    .beta-notice-trigger__label { color:#2b124f; }
    .beta-notice-trigger__hint { color:#5a4b6d; font-size:0.82rem; font-weight:700; }
    body.beta-notice-modal-open { overflow:hidden; }
    .beta-notice-modal__backdrop { position:fixed; inset:0; z-index:var(--z-modal-backdrop); background:rgba(16, 12, 26, 0.56); }
    .beta-notice-modal { position:fixed; z-index:var(--z-modal); top:50%; left:50%; transform:translate(-50%, -50%); width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:#fff; color:#222; border-radius:8px; box-shadow:0 20px 60px rgba(0, 0, 0, 0.35); }
    .beta-notice-modal[hidden], .beta-notice-modal__backdrop[hidden] { display:none !important; }
    .beta-notice-modal:focus { outline:none; }
    .beta-notice-modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px 12px; border-bottom:1px solid #e7e0ef; }
    .beta-notice-modal__header h2 { margin:0; color:#2b124f; font-size:1.35rem; line-height:1.2; }
    .beta-notice-modal__close { flex:0 0 auto; width:36px; height:36px; border:0; border-radius:8px; background:#f3f0f6; color:#2b124f; font-size:1.6rem; line-height:1; cursor:pointer; }
    .beta-notice-modal__close:hover { background:#e9e0f3; }
    .beta-notice-modal__close:focus-visible, .beta-notice-modal__cta:focus-visible { outline:3px solid #4D1A93; outline-offset:2px; }
    .beta-notice-modal__body { padding:16px 20px 4px; font-size:1rem; line-height:1.5; }
    .beta-notice-modal__body p { margin:0 0 12px; }
    .beta-notice-modal__actions { display:flex; justify-content:flex-end; padding:12px 20px 20px; }
    .beta-notice-modal__cta { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border-radius:8px; background:#4D1A93; color:#fff; font-weight:700; text-decoration:none; }
    .beta-notice-modal__cta:hover { background:#361068; color:#fff; text-decoration:none; }
    @media (max-width:768px) {
      .page-title-banner__inner--with-beta { align-items:flex-start; flex-direction:column; }
      .beta-notice-trigger { width:100%; max-width:280px; }
      .beta-notice-modal__header { padding:16px 16px 10px; }
      .beta-notice-modal__body { padding:14px 16px 2px; }
      .beta-notice-modal__actions { justify-content:stretch; padding:12px 16px 16px; }
      .beta-notice-modal__cta { width:100%; }
    }

    /*********** * GAME POINTS ************************************************/
    .reputation, .certificatesCount { transform:translate(-50%, -50%) }
    .reputation { position:absolute; top:45%; left:50%; color:yellow; font-weight:bold; font-size:0.9em }
    .certificatesCount { position:absolute; top:27%; left:50%; color:blue; font-weight:bold; font-size:0.9em }

    /*********** * REWARDS ICONS ************************************************/
    .icon-gleam { position:relative; display:inline-block; overflow:hidden }
    .icon-gleam::after { content:""; position:absolute; top:0; left:-150%; width:50%; height:100%; background:linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%); transform:skewX(-20deg); pointer-events:none; animation:gleam 20s linear infinite }
    @keyframes gleam { 
        0% { left:-150% }
        5% { left:150% }
        100% { left:150% }
    }
    .icon-gleam:nth-child(1)::after { animation-delay:0s }
    .icon-gleam:nth-child(2)::after { animation-delay:0.3s }
    .icon-gleam:nth-child(3)::after { animation-delay:0.6s }
    .icon-gleam:nth-child(4)::after { animation-delay:0.9s }

    /*********** * COURSE MENU HAMBURGER ICON ************************************************/  
    /* For the top bar when toggling open */
    .bar-rotate-top { transform:translateY(7px) rotate(45deg); transition:transform 0.3s ease }
    /* For the bottom bar when toggling open */
    .bar-rotate-bottom { transform:translateY(-5px) rotate(-45deg); transition:transform 0.3s ease }
    #course-menu-mask { background-color:rgba(0, 0, 0, 0.5); position:fixed; top:0; bottom:0; left:0; right:0; z-index:1 }
    #course-menu { z-index:10 }
    /* Hover effect on bars + text:turn them blue */
    #course-menu-toggle:hover .menu-toggle-container div { background-color: blue; }

    /*********** * COURSE MENU ITEMS  ************************************************/  
    /* The base "course link" style */
    .course-link { display:block; background-color:#fff; color:#1F3D7A; padding:0.5rem 1rem; border-radius:0.375rem; text-decoration:none; transition:background-color 0.3s, color 0.3s; font-weight:bold }
    /* Hover:typical reversed style (white on dark-blue) */
    .course-link:hover { background-color:#4D1A93; color:#fff }
    /* .visited => prepend check mark via::before */
    .course-link.visited::before { content:"✓ " }
    /* .onpage => highlight the current link differently */
    .course-link.onpage { color:#4D1A93; border:1px solid #4D1A93 }
    .course-link.onpage:hover { background-color:#d0d0d0 }
    /* .locked => gray, not clickable */
    .course-link.locked { color:#9e9e9e; background-color:#f8f8f8; pointer-events:none; cursor:not-allowed }
    /* No color change on hover */
    .course-link.locked:hover { background-color:#f8f8f8; color:#9e9e9e }


    /*********** * /home.ejs HOME PAGE  ************************************************/  

    .hero-section { display:flex; align-items:center; margin-bottom:100px; gap:20px; max-width:1284px; margin:0 auto }
    .hero-text { flex:2 }
    .hero-image { flex:1; position:relative; width:400px; max-width:100%; aspect-ratio:1 / 1 }
    /* Both images fill this container absolutely */
.hero-image img {
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;      /* <- was none */
  opacity: 0;          /* <- start hidden */
  will-change: opacity;
  transform: translateZ(0);
}    
/* .imgA sits below (z-index=1), always visible */
.hero-image .imgA { z-index: 1; opacity: 1; } /* A is initially visible once src is set */
/* .imgB sits on top (z-index=2), used only for fading in */
.hero-image .imgB { z-index: 2; opacity: 0; }

    .hero-text h1 { font-size:3em }
    .hero-text h2 { font-size:2em; }
    .hero-text h3 { font-size:1.5em; margin-bottom:30px; }    
    /* ---- Categories Section ---- */
    .categories-container { margin-top:-20px; margin-bottom:100px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem;  }
    /* make each tile an <a> so it's naturally clickable & accessible */
    .category-tile { z-index:3; display:flex; justify-content:center; align-items:center; text-align:center; padding:1rem; border:1px solid #daf; border-radius:8px; background:#fff; color:var(--bannercolor); font:bold 1.1rem/1.3 "Inter", sans-serif; text-decoration:none; cursor:pointer; transition:box-shadow .3s, transform .3s }
    .category-tile:hover { box-shadow:0 2px 8px rgba(0, 0, 0, .1); transform:translateY(-3px) }
    /* ---- Rotating text Section ---- */
    .XXXrotator-container {margin:10px 0 30px 0;}
    .rotator { transition: opacity 0.5s ease-in-out;}
    .rotator.fade-out { opacity: 0;}
    .rotator { font-size:1.1em; display: inline-block; padding: .4rem .9rem; background: rgba(0,0,0,.02); border-radius: 9999px; font-weight: 500; backdrop-filter: blur(2px); }
    /* ---- Mobile / Smaller Screens ---- */
    @media (max-width:768px) {
      .hero-section { display:block; text-align:center }
      /* Smaller heading sizes */
      .hero-text h1 { font-size:2em }
      .hero-text h2 { font-size:1.3em; margin-bottom:0px; }
      .hero-text h3 { font-size:1.1em; margin-bottom:0px; }
      /* Show the hero image at 25% of the screen width (viewport width) */
      .hero-image { display:block; position:relative; width:35vw; max-width:none; aspect-ratio:1 / 1; margin:20px auto }
      /* Show the images on mobile too */
      .hero-image img { display:block }
      .rotator-container {margin:20px 0 0 0;}
      .categories-container { margin-top:10px; margin-bottom:100px;}
    }


    /*********** * TIPPY TOOLTIPS  ************************************************/  
    .tippy-box[data-theme~='gp-blue'] { background-color:rgb(180, 210, 251) !important; color:rgb(19, 35, 157) !important }
    .tippy-box[data-theme~='gp-blue'] > .tippy-arrow::before { color:rgb(180, 210, 251) !important }
    
    /*********** * DEFINITIONS POPUPS  ************************************************/  
    /* Basic styles for definition link */
    .def { color:inherit; text-decoration:none; background-image:linear-gradient(to left, #9195bb 33%, rgba(255, 255, 255, 0) 0%); background-position:bottom; background-size:5px 1px; background-repeat:repeat-x; cursor:pointer }
    .def:hover { background-size:9px 2px; background-image:linear-gradient(to left, #61659b 33%, rgba(255, 255, 255, 0) 0%) }

    .definition { position:absolute; padding:8px; background:#f8f8f8; border:1px solid #ccc; border-radius:6px; max-width:240px; box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); display:none; z-index:var(--z-popover) }
    /* Show the definition popup by adding .visible */
    .definition.visible { display:block }

    /*********** * VIDEOS  ************************************************/  
    .youtube-video-container { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; margin:0 auto }
    .youtube-video-container iframe { position:absolute; top:0; left:0; width:100%; height:100% }
    
    
    /*********** * TF & YN QUESTIONS ****************/
    /* Widget frame itself ---------------------------------------------------- */
    #tf-question-widget { border:1px solid #e3e6ea; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.05); max-width:720px; margin:70px auto }

    /* Banner ----------------------------------------------------------------- */
    /* Option A (recommended): muted teal banner, still clearly "a widget" */
    #tf-question-widget .tf-yn-banner { position:relative !important; background:#2fa4a4; color:#fff; background-size:cover; text-align:center; padding:10px 12px; font-weight:600; font-size:1.2em; letter-spacing:0.02em; border-top-left-radius:8px; border-top-right-radius:8px }

    /* Stem text -------------------------------------------------------------- */
    #tf-question-widget .tf-yn-stem-text { font-size:1.2em; font-weight:600; padding:12px 16px; line-height:1.5 }

    /* Question area ---------------------------------------------------------- */
    #tf-question-widget .tf-yn-question-container { text-align:center; padding:10px 0 20px }

    /* Buttons ---------------------------------------------------------------- */
    /* Calmer default states; hover provides the "energy" */
    #tf-question-widget .tf-yn-answer-btn.left { background:#2f7d32; color:#fff; margin-right:18px }
    #tf-question-widget .tf-yn-answer-btn.right { background:#b23b3b; color:#fff; margin-left:18px }
    #tf-question-widget .tf-yn-answer-btn.left:hover { background:#2aa23a }
    #tf-question-widget .tf-yn-answer-btn.right:hover { background:#d24545 }

    /* Feedback box ----------------------------------------------------------- */
    /* Neutral base; success/danger are softened */
    #tf-question-widget .tf-yn-answer-container { padding:12px 14px; margin:12px 14px; border-radius:8px; background:#f8f9fa; border:1px solid #eef0f2 }
    #tf-question-widget .feedback-success { background:#eefbf1; border-color:#d6f2dc }
    #tf-question-widget .feedback-danger { background:#fff2f2; border-color:#f6d6d6 }

    /* Footer ----------------------------------------------------------------- */
    /* Quieter, less "alert-like" footer */
    #tf-question-widget .tf-yn-footer { background:#fafafa; border-top:1px solid #eee; padding:8px 12px; margin:12px 1px 1px 1px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.85em; border-bottom-left-radius:8px; border-bottom-right-radius:8px }
    #tf-question-widget .tf-yn-question-progress { color:#777; font-weight:600; font-size:0.85em; white-space:nowrap }
    .tf-yn-optional-statement { text-align:center; margin:8px 0 10px 0; font-size:0.85em; color:#777 }

    /* "Another?" link -------------------------------------------------------- */
    #tf-question-widget #next-question-btn { color:#0b63ce; text-decoration:none }
    #tf-question-widget #next-question-btn:hover { text-decoration:underline }

    /* ===== Accessible focus ring for True/False / Yes/No buttons ===== */
    #tf-question-widget .tf-yn-answer-btn { outline:none }
    @supports selector(:focus-visible) {
      #tf-question-widget .tf-yn-answer-btn:focus { outline:none }
      #tf-question-widget .tf-yn-answer-btn:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 6px #0a84ff }
    }

    /* remove generic stem outline */
    #tf-question-widget .tf-yn-stem-text:focus { outline:none }

    /* Mobile: slightly tighter side margins while preserving breathing room ---- */
    @media (max-width:600px) {
      #tf-question-widget { margin:50px 12px }
      #tf-question-widget .tf-yn-stem-text { font-size:1.1em; padding:12px 14px }
      #tf-question-widget .tf-yn-banner { font-size:1.1em; padding:10px 10px }
      #tf-question-widget .tf-yn-answer-btn.left { margin-right:12px }
      #tf-question-widget .tf-yn-answer-btn.right { margin-left:12px }
      #tf-question-widget .tf-yn-answer-container { margin:12px; padding:12px }
    }

/* *********** * MCQ QUESTIONS  ************************************************/
.mcq-widget {
  margin: 1rem 0;
}

.mcq-widget .mcq-option + .mcq-option {
  margin-top: 0rem;
}

.mcq-widget .mcq-option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.mcq-widget .mcq-input {
  flex: 0 0 auto;
  margin-top: 0.6rem; /* nudges radio down to align better with text */
}

.mcq-widget .mcq-option-text {
  display: inline-block;
}

.mcq-widget .mcq-optional-note {
  margin-top: 0.75rem;
  font-size: 0.75em;
  font-style: italic;
  color: #555;
}

.mcq-widget .mcq-feedback {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  padding-left: 1.5rem;
}

.mcq-widget .mcq-feedback[hidden] {
  display: none !important;
}

.mcq-widget .mcq-option-feedback-source {
  display: none !important;
}

.mcq-widget .mcq-feedback.is-correct::before,
.mcq-widget .mcq-feedback.is-wrong::before {
  position: absolute;
  left: 1px;
  top: 3px;
  
  line-height: 1;
  font-weight: bold;
}

.mcq-widget .mcq-feedback.is-correct::before {
  content: "✓";
  color: green;font-size: 1.5rem;
}

.mcq-widget .mcq-feedback.is-wrong::before {
  content: "☹";color:darkred;font-size: 1rem;
}

    /*********** * RENDERED HTML CONTENT STYLES  ************************************************/
    #page-html-rendered {
      font-size: 1.2em;
      line-height: 1.6;
    }

    @media (max-width:600px) {
      #page-html-rendered {
        font-size: 1em;
        line-height: 1.65;
      }
    }

    #page-html-rendered p {
      margin-bottom: 1em;
    }

    /* Sound effects toggle button */ 
    #sfxToggle {
      position: absolute;
      top: 10px;
      right: 10px;

    }
    /* icon animations */
    /* ───────── 1. Gold-star spin ───────── */
    .animatedStar { animation:spinIn 2s ease-out forwards }
    @keyframes spinIn { 0% { transform:scale(0.7) rotate(0deg); opacity:0 }
    50% { transform:scale(1.2) rotate(180deg); opacity:1 }
    100% { transform:scale(1)   rotate(360deg); opacity:1 }
    }
    /* ───────── 2. Red-alert shake ───────── */
    .animatedAlert { animation:shake 0.5s ease-in-out }
    @keyframes shake { 0% { transform:translateX(0) }
    10% { transform:translateX(-3px) }
    20% { transform:translateX(3px) }
    30% { transform:translateX(-3px) }
    40% { transform:translateX(3px) }
    50% { transform:translateX(-2px) }
    60% { transform:translateX(2px) }
    70% { transform:translateX(-2px) }
    80% { transform:translateX(2px) }
    90% { transform:translateX(-1px) }
    100% { transform:translateX(0) }
    }


/* ───────── Podcast Player wrapper ───────── */
/* .podcast-player { margin-bottom:8px } */
/* ───────── Visualiser area ───────── */
/* .podcast-visualiser { position:relative; width:100%; height:120px; border:1px solid #aaa; overflow:hidden; border-radius:5px 5px 0 0; box-sizing:border-box }
.podcast-visualiser canvas { position:relative; z-index:1; width:100%!important; height:100%!important; background:transparent!important; opacity:.8; display:block }
.podcast-visualiser .bg-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:fill; z-index:0 }
.podcast-visualiser .podcast-overlay-icon { position:absolute; top:8px; right:8px; width:84px; height:84px; z-index:2; pointer-events:none } */
/* time overlay */
/* .podcast-visualiser .time { position:absolute; top:8px; left:8px; z-index:3; padding:4px 8px; font-variant-numeric:tabular-nums; font-size:.9rem; text-align:center; color:#fff; background:rgba(255, 255, 255, .3); backdrop-filter:blur(8px); border-radius:4px; pointer-events:none } */
/* ───────── Control bar ───────── */
/* .podcast-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:0; padding:4px; border:1px solid #aaa; border-top:0; background:#E4F6FC; border-radius:0 0 5px 5px; box-sizing:border-box }
.btn-podcast-play { background:transparent!important; border:none!important; padding:0!important; width:auto!important; height:auto!important; color:transparent }
.btn-podcast-play[disabled] { opacity:1; cursor:pointer } */
/* sliders */
/* .podcast-controls input[type=range] { -webkit-appearance:none; background:#ddd; height:4px; border-radius:2px; cursor:pointer }
.podcast-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; background:#007bff; border-radius:50% }
.podcast-controls .volume-container { display:flex; align-items:center; gap:4px } */

/*********** IMAGE COPYRIGHT + FUNDING/COI (shared modal system) ***********/
/* Camera icon launcher (existing behavior) */
#cameraLaunch { display:none; cursor:pointer; opacity:0.5 !important }
/* ========================= Shared Modal:Overlay/Mask ========================= */
.coi-copyright-mask { position:fixed; inset:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s ease, visibility 0.2s ease; z-index:var(--z-modal-backdrop) }
/* Visible state */
.coi-copyright-mask.is-open { opacity:1; visibility:visible; pointer-events:auto }
/* ========================= Shared Modal:Panel ========================= */
.coi-copyright-modal { --modal-min-width:320px; --modal-max-width:500px; position:relative; background:#fff; border-radius:6px; box-shadow:0 4px 10px rgba(0, 0, 0, 0.3); min-width:var(--modal-min-width); width:100%; max-width:var(--modal-max-width); max-height:90vh; overflow:hidden; z-index:var(--z-modal); display:flex; flex-direction:column }
/* Size variants */
.coi-copyright--md .coi-copyright-modal { --modal-min-width:320px; --modal-max-width:500px }
.coi-copyright--lg .coi-copyright-modal { --modal-min-width:320px; --modal-max-width:600px }
/* ========================= Shared Modal:Header ========================= */
.coi-copyright-header { position:relative; border-bottom:1px solid #ccc; padding:1rem; margin:0 }
.coi-copyright-title { margin:0; padding:0; font-size:1.25rem; line-height:1.2 }
/* Close button pinned to modal top-right */
.coi-copyright-close { position:absolute; top:0.5rem; right:0.5rem; background:transparent; border:none; padding:0; cursor:pointer; font-size:1.5rem; line-height:1 }
/* Optional (recommended) affordances */
.coi-copyright-close:hover { opacity:0.7 }
.coi-copyright-close:focus-visible { outline:2px solid #005fcc; outline-offset:2px }
/* ========================= Shared Modal:Body ========================= */
.coi-copyright-body { padding:1rem; overflow-y:auto; flex:1 }
/* Optional:spacing for your existing layout */
.coi-copyright-body p { margin-top:0 }
    /*********** * DRAWER AND MODAL  ************************************************/  
    /* SHARED OVERLAY (mask) */
    .rmd-mask { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:var(--z-modal-backdrop) }
    .rmd-mask.show {opacity:1; pointer-events:auto }
    /* ====================== M0ODAL ====================== */
    .rmd-modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; max-width:90%; background:#fff; border-radius:6px; box-shadow:0 4px 10px rgba(0, 0, 0, 0.3); z-index:var(--z-modal); opacity:0; pointer-events:none; transition:opacity 0.3s ease; display:flex; flex-direction:column; max-height:90vh }
    .rmd-modal.show { opacity:1; pointer-events:auto }
    /* Modal Header */
    .rmd-modal__header { border-bottom:1px solid #ccc; padding:1rem }
    .rmd-modal__header h2 {padding:0; margin:0;}
    .rmd-drawer__header h2 {padding:2rem 0 0 0; margin:0;}
    /* Close (X) button in top-right corner */
    .rmd-modal__close-btn { position:absolute; top:0.5rem; right:0.5rem; cursor:pointer; font-size:18px; background:none; border:none }
    /* Modal Body - scrollable if there's lots of content */
    .rmd-modal__body { padding:0 1rem 0 1rem; overflow-y:auto; flex:1 }
    /* ====================== DRAWER ====================== */
    .rmd-drawer { position:fixed; top:0; right:0; width:100%; height:100%; background:#fff; z-index:var(--z-modal); transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column;  max-width:500px; }
    .rmd-drawer.show { transform:translateX(0) }
    /* Drawer Header */
    .rmd-drawer__header { border-bottom:1px solid #ccc; padding:1rem; position:sticky; top:0; background:#fff; z-index:1 }
    /* The back arrow button */
    .rmd-drawer__back-btn { position:absolute; top:0.5rem; left:0.5rem; cursor:pointer; font-size:18px; background:none; border:none }
    /* Drawer Body - scrollable content */
    .rmd-drawer__body { padding:1rem; overflow-y:auto; flex:1; }
    .rmd-drawer {
      border-left: 1px solid #ddd;
      box-sizing: border-box;  /* so the border doesn't push width */
      box-shadow: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* animate both */
    }    
    /* Shadow only while opening/open */
    .rmd-drawer.show {
      box-shadow: -6px 0 16px rgba(0,0,0,.12);
    }

    /* ====================== BOTTOM SHEET (mobile) ====================== */
.rmd-bottomsheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: var(--z-modal);

  transform: translateY(100%);
  transition: transform 0.3s ease;

  display: flex;
  flex-direction: column;
  max-height: 95vh;
}

.rmd-bottomsheet.show{
  transform: translateY(0);
}

.rmd-bottom__header{
  border-bottom:1px solid #ccc;
  padding:1rem;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.rmd-bottom__back-btn{
  position:absolute;
  top:0.5rem;
  left:0.5rem;
  cursor:pointer;
  font-size:18px;
  background:none;
  border:none;
}

.rmd-bottom__body{
  padding:1rem;
  overflow-y:auto;
  flex:1;
}

.rmd-bottom__handle{
  width:44px;
  height:5px;
  border-radius:3px;
  background:#ccc;
  margin:10px auto 6px;
}


    /* ───────── SlidingPanel ───────── */
.sliding-panel { position:fixed; background:#fff; box-shadow:0 4px 10px rgba(0, 0, 0, .25); z-index:var(--z-modal); display:flex; flex-direction:column; transition:transform 0.3s ease }
/* Handle (mobile) */
.sliding-panel__handle { width:40px; height:4px; background:#ccc; border-radius:2px; margin:8px auto 4px; display:none }
/* Header */
.sliding-panel__header { border-bottom:1px solid #ccc; padding:0.75rem 1rem 0.5rem; position:relative; flex-shrink:0 }
.sliding-panel__header h2 { margin:10px 0 0 0; font-size:1.1rem }
.sliding-panel__back-btn, .sliding-panel__close-btn { background:none; border:none; font-size:1.1rem; cursor:pointer; position:absolute; top:0 }
.sliding-panel__back-btn { top: 0.5rem;   right: 0.5rem; left: auto; font-size:1.5rem; }
.sliding-panel__close-btn { right:0.5rem }
/* Body */
.sliding-panel__body { overflow-y:auto; padding:1rem; flex:1 1 auto }
/* ─── Desktop (≥769 px) ─── */
@media (min-width:769px) {
  .sliding-panel { top:0; right:0; width:420px; height:100%; transform:translateX(100%) }
  .sliding-panel.show { transform:translateX(0) }
  .sliding-panel__back-btn { display:inline }
  .sliding-panel__close-btn { display:none }
  .sliding-panel__handle { display:none }
}
/* ─── Mobile (<769 px) overrides ─── */
@media (max-width:768px) {
  .sliding-panel { left:0; bottom:0; width:100%; height:60vh; transform:translateY(100%); border-radius:12px 12px 0 0; box-shadow:0 -6px 12px rgba(0, 0, 0, .3), 0 -2px 4px rgba(0, 0, 0, .1); overscroll-behavior:contain }
  .sliding-panel.show { transform:translateY(0) }
  .sliding-panel.expanded { height:100vh }
  /* 2) Header:push its contents down to make room for the handle */
  .sliding-panel__header { position:relative; padding:48px 1rem 0.5rem; border-bottom:1px solid #ccc }
  /* 3) Close button:explicitly show & pin */
  .sliding-panel__close-btn { display:inline; position:absolute; top:6px; right:1rem; font-size:1.5rem; z-index:10 }
  /* 4) Handle:absolute, wide hit-area, slim visual bar */
  .sliding-panel__handle { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:80px; height:30px; display:flex; align-items:center; justify-content:center; touch-action:none; cursor:grab; z-index:5; margin:0; background:#fff }
  .sliding-panel__handle::before { content:''; position:absolute; width:30px; height:2px; background:#888; border-radius:1px; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 -5px 0 0 #888, 0  5px 0 0 #888; pointer-events:none }
  /* 5) Hide "back" button on mobile */
  .sliding-panel__back-btn { display:none }
}




    /*********** * Notepad container (user page notes editor) ************************************************/
    #notepad-container { padding:8px }
    /* Info line */
    .notepad-info { margin-bottom:6px; font-size:0.9em; color:#555 }
    /* The textarea itself */
    .notepad-textarea { width:100%; height:200px; box-sizing:border-box; padding:8px; border:1px solid #ccc; border-radius:4px; font-family:inherit; font-size:1em; line-height:1.4; resize:vertical; background:#fff; color:#111 }
    .notepad-toolbar { margin-bottom:6px; font-size:1em; }
    .notepad-toolbar button,
    .notepad-toolbar select { margin-right:4px; padding:2px 6px; font-size:inherit; }
    .notepad-toolbar button:hover { background:#eee; }
    
    .notepad-editor {
      width:100%; min-height:100px; box-sizing:border-box;
      padding:8px; border:1px solid #ccc; border-radius:4px;
      font-family:inherit; font-size:1em; line-height:1.4;
      background:#fff; color:#111; overflow:hidden;
      white-space:pre-wrap; outline:none;
    }


    /* ====================== login pages styles ====================== */
    .authPage {}
    /* Example wizard container from your login.ejs */
    .authPage, #loginWizard { max-width:400px; margin:0 auto; position:relative; min-height:370px }
    /* If you want the wizard's .btn to differ from your global .btn:*/
    .authPage #loginWizard .btn { width:170px }
    /* Cards inside the wizard */
    .authPage .login-card { position:relative; text-align:center; margin:20px 0; border:1px solid #ccc; border-radius:5px; padding:1rem; min-height:350px; max-width:400px; display:none; background:#fff8ff }
    .authPage .login-card.active { display:block }
    /* Card icon (the:before image) */
    .authPage .login-card::before { content:""; display:block; width:80px; height:80px; margin:0 auto 1rem; background:url("/icons/person-login-icon-purple.svg") no-repeat center center; background-size:contain; opacity:0.6 }
    .authPage .login-card h2 { margin-top:0 }
    /* Warnings */
    .authPage #emailWarning { color:orange; margin-top:0.5rem }
    /* Handling long words or emails */
    .authPage #cardNotFoundEmail { overflow-wrap:break-word; word-wrap:break-word; word-break:break-word; white-space:normal; display:inline-block; max-width:100% }
    /* Form inputs for email, password, text, etc. */
    .authPage .login-card input[type="email"], .authPage .login-card input[type="password"], .authPage .login-card input[type="text"] { padding:12px; border-radius:9999px; border:1px solid #ccc; width:100%; margin-bottom:1rem }
    /* Keyframe for the "shake" error animation */
    @keyframes shake { 0% { transform:translateX(0) }
    20% { transform:translateX(-4px) }
    40% { transform:translateX(4px) }
    60% { transform:translateX(-4px) }
    80% { transform:translateX(4px) }
    100% { transform:translateX(0) }
    }
    /* Utility class to apply the shake animation */
    .authPage .shake { animation:shake 0.3s ease-in-out }
    /* "Show/hide password" wrapper */
    .authPage .password-wrapper { position:relative; display:inline-block; width:100% }
    .authPage .password-wrapper input { padding-right:2.5rem }
    .authPage .toggle-visibility-btn { position:absolute; top:50%; right:8px; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.2rem }
    .authPage .toggle-eye-icon { width:20px; height:20px; stroke:#888; stroke-width:1; fill:none }


    /*********** * FOOTER  ************************************************/  
    .footer-container { max-width:1000px; margin:0 auto }
    .footer-main { padding:3rem 1rem }
    .footer-nav-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:1.5rem; justify-items:start; margin:0; padding:0; list-style:none }
    .footer-nav-list a { text-decoration:none; color:#fff; transition:color 0.3s ease }
    .footer-nav-list a:hover { color:#bee3f8 }
    .copyright-notice { font-size: 0.9em; margin-top:1.5rem; text-align:center; color:#ccc; border-top:1px solid rgb(226, 4, 226); padding-top:12px }



    /*********** * .story-content ************************************************/
    .story-content { line-height: 1.5; }
    .story-content li { margin-bottom:6px; }
    .story-content h2, .story-content h3 { margin: 30px 0 0 0; }
    .story-content p {margin:6px 0 12px 0;}
    .story-content .firstpara {font-size:1.2em; }
    .story-content .boldboxed {border:1px solid #bbb; padding:5px; border-radius:4px; font-weight:bold;background:#fff8ff;}
    .story-content .boxed {border:1px solid #bbb; padding:5px; border-radius:4px;background:#fff8ff;}
    /* hide <p>&nbsp; </p> */
    .story-content p:empty, p:only-child:empty { height:0; overflow:hidden }
    ul.plain {list-style: none; margin-left: 0; padding-left: 0;}
    ul.plain li {margin-bottom: 0.5rem;}

    
    .body-2-col-divider-hr {display:none;}
    @media (max-width: 768px) {.body-2-col-divider-hr {display:block;  border-top: 3px solid var(--bannercolor); }}


/*********** * PSEUDOCODE ************************************************/
.show-more-container { display:none; border:1px solid #ccc; border-radius:5px; background-color:#f0f0ff; padding:2px 6px 0 6px; margin-bottom:16px }
.key-points-inner-container, #references {  border-radius:5px; border:1px solid #ddd; padding:8px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.1) }
.slide-down-panel .key-points-inner-container { display: block; }

.checkbox-bullet span { margin-left:6px; line-height:1.8 }
.checkbox-1-5 { transform:scale(1.8); margin:4px 12px 4px 8px }
.checkbox-bullet { display:flex; align-items:start; margin-bottom:10px }
.lucide-show { margin-right:6px; width:20px; display:inline-block; vertical-align:bottom; stroke-width:1.5; color:#b8f }

/* Figure pseudocode blocks */
.figure-block{
  border:1px solid #ccc;
  box-sizing:border-box;
  margin:0 0 1em;
  clear:both;
}
.figure-block > img,
.figure-block > .img-credit-overlay-host--block > img,
.figure-block > .img-credit-overlay-host--block > picture > img,
.figure-block > .img-credit-overlay-host--block > a > img{
  display:block;
  width:100%;
  height:auto;
}
.figure-block > figcaption,
.figure-caption{
  text-align:center;
  font-size:0.9em;
  color:#666;
  margin-top:0;
  padding:5px;
  background-color:#eef;
}
.figure-block--full{
  width:100%;
  max-width:none;
}
.figure-block--right{
  float:right;
  clear:right;
  max-width:100%;
  margin:0.7em 0 1em 1em;
}

//*********** right-side responsive image + caption ***********************/
/*Example HTML: <figure class="figure-350-right"> <img src="/images/advanced-stroke-management-banner-overview.jpg" /> <figcaption class="caption-350"> Caption goes here </figcaption> </figure> */
/* 1) Common "figure-right" styling for all widths, including 100 */
.figure-100-right, .figure-250-right, .figure-300-right, .figure-350-right, .figure-400-right, .figure-450-right { border:1px solid #ccc; width:100%; clear:both; margin:0 0 1em }
.figure-100-right img, .figure-250-right img, .figure-300-right img, .figure-350-right img, .figure-400-right img, .figure-450-right img,
.figure-100-right > .img-credit-overlay-host--block > img, .figure-250-right > .img-credit-overlay-host--block > img, .figure-300-right > .img-credit-overlay-host--block > img, .figure-350-right > .img-credit-overlay-host--block > img, .figure-400-right > .img-credit-overlay-host--block > img, .figure-450-right > .img-credit-overlay-host--block > img,
.figure-100-right > .img-credit-overlay-host--block > picture > img, .figure-250-right > .img-credit-overlay-host--block > picture > img, .figure-300-right > .img-credit-overlay-host--block > picture > img, .figure-350-right > .img-credit-overlay-host--block > picture > img, .figure-400-right > .img-credit-overlay-host--block > picture > img, .figure-450-right > .img-credit-overlay-host--block > picture > img,
.figure-100-right > .img-credit-overlay-host--block > a > img, .figure-250-right > .img-credit-overlay-host--block > a > img, .figure-300-right > .img-credit-overlay-host--block > a > img, .figure-350-right > .img-credit-overlay-host--block > a > img, .figure-400-right > .img-credit-overlay-host--block > a > img, .figure-450-right > .img-credit-overlay-host--block > a > img { display:block; width:100%; height:auto }
/* caption is identical no matter the size */
.figure-100-right .caption-100, .figure-250-right .caption-250, .figure-300-right .caption-300, .figure-350-right .caption-350, .figure-400-right .caption-400, .figure-450-right .caption-450 { text-align:center; font-size:0.9em; color:#666; margin-top:0; padding:5px; background-color:#eef }
/* 2) At larger viewports:*/
@media (min-width:580px) {
  .figure-100-right { width:100%; max-width:none; float:none; clear:both; margin:0 0 1em }
  /* — all the fixed‑pixel figures float right as before — */
  .figure-250-right, .figure-300-right, .figure-350-right, .figure-400-right, .figure-450-right { max-width:50%; float:right; clear:right; margin:0.7em 0 1em 1em }
  .figure-250-right { width:250px }
  .figure-300-right { width:300px }
  .figure-350-right { width:350px }
  .figure-400-right { width:400px }
  .figure-450-right { width:450px }
}

/*********** SAQ WIDGET ************************************************/
.saq-widget { border:1px solid var(--bannercolor); padding:1rem; margin:1rem 0; border-radius:5px }
.saq-banner { background:#ED64A6; color:#fff; background-size:cover; text-align:center; padding:10px; font-weight:bold; font-size:1.4em; display:block; margin:-1rem -1rem 1rem -1rem }
.saq-answers { list-style:none; padding:0; margin:0.5rem 0 0 }
.checkbox-bullet { margin-bottom:0.4rem }    
    
    /*********** * TOP BANNER ************************************************/    
    .top-banner {display: flex; justify-content: space-between; align-items: center; padding: 16px 0px;}
    .search-icon-mobile, .banner-image-small, .search-pc {display: none;}
    .banner-image-large img, .banner-image-small img {max-width: 100%; height: auto;}
    #txtBannerSearchBox:focus {outline: none; border: none;}
    footer {margin-top:20px;}
    @media (max-width: 768px) {#story-content {min-height:300px;} .banner-image-large {display: none;} .search-icon-mobile, .banner-image-small {display: block; border:0px solid #ccc;} .search-icon-mobile img, .banner-image-small img {max-width: 100%; height: auto;} .search-pc {display: none;}}
    @media (min-width: 769px) {#story-content {min-height:200px;} .search-icon-mobile {display: none;} .search-pc {display: flex; align-items: center; width: 400px;} .search-pc input {margin-right: 10px;}}

    .icon-book-open-text {display:inline-block; vertical-align:middle;stroke-width: 1.5; color:#c9f;}

    .selected-course-menu {border:1px solid #2a2ad185;}
      
    /* Basic two-column container for CPD pages, or any other */
    .container-two-col { width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(20px, 5vw, 60px); margin-bottom:20px }
    .left-col { flex:0 1 780px; max-width:780px }
    .XXXright-col { flex:0 0 30%; padding:0; font-size:0.9em }
    .right-col { flex:0 0 30%; padding:0; font-size:0.9em; display:flex; flex-direction:column; align-items:stretch; gap:16px }

    .info-box { background:#f8f8f8; border-radius:8px; border:1px solid #ddd; padding:16px; margin-bottom:16px }
    .info-box h3 { margin:0 0 6px 0 }
    .sidebar-card {
      background:#fff;
      border:1px solid #dbe3ee;
      border-radius:14px;
      padding:18px;
      box-shadow:0 4px 14px rgba(25, 35, 52, 0.04);
    }
    .sidebar-card--glass {
      position:relative;
      overflow:hidden;
      border-color:rgba(214, 224, 238, 0.92);
      background:linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(245, 249, 255, 0.66) 100%);
      box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 12px 28px rgba(31, 49, 72, 0.08);
      backdrop-filter:blur(16px) saturate(145%);
      -webkit-backdrop-filter:blur(16px) saturate(145%);
    }
    .sidebar-card--glass::before {
      content:"";
      position:absolute;
      inset:1px;
      border-radius:inherit;
      pointer-events:none;
      background:linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 40%, rgba(255, 255, 255, 0.08) 100%);
      opacity:0.95;
    }
    .sidebar-card--glass > * {
      position:relative;
      z-index:1;
    }
    .sidebar-card__header { margin-bottom:14px; }
    .sidebar-card__header h3 {
      margin:0;
      color:#20324b;
      font-size:1.15rem;
      line-height:1.3;
    }
    .sidebar-fact-list { margin:0; padding:0; }
    .sidebar-fact-list li { color:#26364c; }
    .sidebar-fact { margin-bottom:12px; }
    .sidebar-fact--certificate {
      margin-top:12px;
      padding-top:12px;
      border-top:1px dashed #dbe3ee;
    }
    .sidebar-assessment-item { margin-top:14px; }
    .sidebar-assessment-panel {
      margin:0;
      padding:14px;
      border:1px solid #dbe3ee;
      border-radius:12px;
      background:#f8fafc;
    }
    .sidebar-assessment-panel > strong {
      display:block;
      margin-bottom:8px;
      color:#1f3148;
    }
    .sidebar-assessment-panel p {
      margin:0 0 10px 0;
      color:#506076;
    }
    .sidebar-assessment-list {
      margin:0;
      padding-left:18px;
      color:#26364c;
    }
    .sidebar-assessment-list li { margin-bottom:6px; }
    .sidebar-card--tools {
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .sidebar-card--tools .sidebar-card__header {
      margin-bottom:0;
    }
    .sidebar-tool {
      padding:14px;
      border:1px solid #e6ecf4;
      border-radius:12px;
      background:#fbfcfe;
    }
    .sidebar-tool__copy h4 {
      margin:0 0 4px 0;
      color:#20324b;
      font-size:1rem;
      line-height:1.35;
    }
    .sidebar-tool__copy p {
      margin:0;
      color:#5d6d83;
    }
    .sidebar-tool__action { margin-top:12px; }
    .sidebar-helper-text {
      margin-top:10px;
      color:#6b7788;
    }
    .sidebar-utility-row {
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border:1px solid #e6ecf4;
      border-radius:12px;
      background:#fff;
      color:inherit;
      transition:border-color .2s, background-color .2s, transform .2s;
    }
    .sidebar-utility-row:hover {
      border-color:#cbd7e7;
      background:#fafcff;
      text-decoration:none !important;
      transform:translateY(-1px);
    }
    .sidebar-utility-row__copy {
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .sidebar-utility-row__title {
      font-weight:700;
      color:#20324b;
    }
    .sidebar-utility-row__meta {
      color:#607186;
      font-size:0.92em;
      line-height:1.45;
    }
    .sidebar-utility-row__chevron {
      color:#7e8ea6;
      font-size:1.2rem;
      line-height:1;
      padding-top:2px;
    }
    .sidebar-card--details .sidebar-disclosure,
    .sidebar-card--details .sidebar-detail-row {
      padding-top:14px;
      margin-top:14px;
      border-top:1px solid #e7edf4;
    }
    .sidebar-card--details .sidebar-disclosure:first-of-type,
    .sidebar-card--details .sidebar-detail-row:first-of-type {
      padding-top:0;
      margin-top:0;
      border-top:0;
    }
    .sidebar-disclosure__trigger {
      display:block;
      color:#20324b;
      font-weight:700;
    }
    .sidebar-disclosure__content {
      margin-top:12px;
      padding-top:12px;
      border-top:1px dashed #e0e7f1;
      color:#2f4057;
    }
    .sidebar-detail-row {
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .sidebar-detail-row__label {
      font-weight:700;
      color:#20324b;
    }
    .sidebar-detail-row__value {
      color:#516176;
    }
    .sidebar-citation-entry + .sidebar-citation-entry {
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid #edf2f7;
    }
    .sidebar-citation-entry h4 {
      margin:0 0 6px 0;
      color:#20324b;
      font-size:0.98rem;
    }
    .sidebar-citation-entry p {
      margin:0;
      color:#5d6d83;
      line-height:1.55;
    }
    .sidebar-card--trust p {
      margin:0;
      color:#516176;
      line-height:1.65;
    }
    .sidebar-recommendations { display:flex; flex-direction:column; gap:12px; }
    .sidebar-recommendation {
      padding-top:12px;
      border-top:1px solid #edf2f7;
    }
    .sidebar-recommendation:first-child {
      padding-top:0;
      border-top:0;
    }
    .sidebar-recommendation__title {
      display:block;
      font-weight:700;
      color:#1d5f9f;
      text-decoration:underline;
      text-decoration-thickness:2px;
      text-underline-offset:4px;
      text-decoration-color:#7bb3dc;
      border-radius:4px;
      transition:color .15s ease, text-decoration-color .15s ease, background-color .15s ease;
    }
    .sidebar-recommendation__title:hover,
    .sidebar-recommendation__title:focus {
      color:#0f4f8a;
      text-decoration-color:#0f4f8a;
    }
    .sidebar-recommendation__title:focus-visible {
      outline:3px solid rgba(29,95,159,.22);
      outline-offset:3px;
    }
    .sidebar-recommendation__meta {
      margin:6px 0 0 0;
      color:#607186;
      line-height:1.5;
      font-size:0.94em;
    }
    @media (max-width:768px) {
      .container-two-col { flex-direction:column }
      .left-col, .right-col { flex:0 0 100%; border-left:none; padding-left:0 }
      .left-col                        { flex:0 0 100%; padding-right:0 }
      .right-col                       { flex:0 0 100%; width:100% }
      .left-col { padding-right:0px }
    }
    @media (min-width:769px) {
      .left-col { padding-right:30px }
    }

    /* Course tools wrapper */
.course-tools-mobile {
  margin: 0;
}

.course-tools-mobile__title {
  display: block;
}

.course-tools-mobile__meta {
  display: block;
}

/* Desktop */
@media (min-width: 769px) {
  .course-tools-mobile {
    display: block;
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .course-tools-mobile__summary {
    display: none;
  }

  .course-tools-mobile__body {
    display: block;
    padding: 0;
    border: 0;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .course-tools-mobile {
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
  }

  .course-tools-mobile__summary {
    display: block;
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    background: #f8f8f8;
  }

  .course-tools-mobile__summary::-webkit-details-marker {
    display: none;
  }

  .course-tools-mobile__title {
    font-weight: 700;
    color: #333;
    padding-right: 28px;
  }

  .course-tools-mobile__meta {
    margin-top: 4px;
    font-size: 0.9em;
    font-weight: 400;
    color: #666;
    padding-right: 28px;
  }

  .course-tools-mobile__summary::after {
    content: "▼";
    position: absolute;
    top: 16px;
    right: 16px;
    color: #666;
    font-size: 0.9em;
  }

  .course-tools-mobile[open] .course-tools-mobile__summary::after {
    content: "▲";
  }

  .course-tools-mobile__body {
    padding: 8px 8px 0 8px;
    border-top: 1px solid #e5e5e5;
  }

  .course-tools-mobile__body .info-box {
    margin-bottom: 8px;
  }
  .sidebar-card {
    padding:16px;
    border-radius:12px;
  }
  .sidebar-utility-row {
    padding:12px;
  }
}

    /* ======================= CPD Progress Circle (namespaced) ======================= */
  .cpdpc { --count:10; --size:80px; --dot:12px; --hit:24px; --ring:5px; --offset:-90deg; --step:calc(360deg / var(--count)); --r:calc(var(--size)/2 - var(--dot)/2 - var(--ring)/2); --visited:var(--bannercolor); --skipped:#6ccfdf; --idle:#fff; --current:#0a58ca; --ring-color:#eee; --ring-fill:#f0f0ff; --text:#666; --stagger-total:0.7s; --current-i:0; --hand-len:20px; --hand-thickness:2px; --hand-color:#555; position:relative; width:var(--size); height:var(--size); margin:0; padding:0; list-style:none;}
  /* Outer ring */
  .cpdpc::before { content:""; position:absolute; inset:0; border-radius:50%; border:var(--ring) solid var(--ring-color); background-color:var(--ring-fill) }
  /* Hand points from the current dot back toward the center */
  .cpdpc__hand-item {
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    transform:translate(-50%, -50%)
    rotate(calc(var(--current-i) * var(--step) + var(--offset)))
    translate(var(--r));
  }
  .cpdpc__hand {
    position:absolute;
    right:0;
    top:50%;
    width:var(--hand-len);
    height:var(--hand-thickness);
    transform:translateY(-50%);
    transform-origin:right center;
  }
  .cpdpc__hand::before {
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:100%;
    height:100%;
    transform:translateY(-50%);
    border-radius:999px;
    background:var(--hand-color);
    opacity:0.9;
  }
  /* Each item sits around the circle */
  .cpdpc__item { position:absolute; top:50%; left:50%; width:var(--hit); height:var(--hit); transform:translate(-50%, -50%)
  rotate(calc(var(--i) * var(--step) + var(--offset)))
  translate(var(--r))
  rotate(calc(-1 * (var(--i) * var(--step) + var(--offset)))) }
  /* Dot layer fills the positioning box */
  .cpdpc__dot { position:absolute; inset:0; display:block; z-index:1;
    -webkit-clip-path: circle(calc(var(--dot) / 2) at 50% 50%);
    clip-path: circle(calc(var(--dot) / 2) at 50% 50%); }
  /* Visible dot + sequential pop-in */
  .cpdpc__dot::after { content:""; position:absolute; top:50%; left:50%; width:var(--dot); height:var(--dot); transform:translate(-50%, -50%) scale(0); border-radius:50%; background:var(--idle); box-shadow:0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.06); opacity:0; animation:cpdpc-pop-in 0.4s ease-out forwards; animation-delay:calc(var(--i) * (var(--stagger-total) / var(--count))) }
  /* States (color only) */
  .cpdpc__dot.visited::after { background:var(--visited) }
  .cpdpc__dot.skipped::after { background:var(--skipped) }
  .cpdpc__dot.not-visited::after { background:var(--idle) }
  .cpdpc__dot.current::after { background:var(--current); }
  /* Center label */
  .cpdpc__label { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; font-size:10px; line-height:1.2; color:var(--text); pointer-events:none }
  .cpdpc__label div:last-child { font-weight:normal; font-size:11px }
  /* Screen-reader helper */
  .cpdpc .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
  /* Keyframes (namespaced) */
  @keyframes cpdpc-pop-in { 0% { opacity:0; transform:translate(-50%, -50%) scale(0) }
  60% { opacity:1; transform:translate(-50%, -50%) scale(1.2) }
  100% { opacity:1; transform:translate(-50%, -50%) scale(1) }
  }
  /* Respect reduced-motion */
  @media (prefers-reduced-motion:reduce) {
    .cpdpc__dot::after { animation:none; opacity:1; transform:translate(-50%, -50%) scale(1) }
  }
  @media (max-width:768px) { /* mobile */
    #progress-circle-outer-container-pc { display:none }
    #progress-circle-outer-container-mobile { float:right;position: relative;
  width: var(--progress-circle-size, 80px);
  height: var(--progress-circle-size, 80px); }
  }
  @media (min-width:769px) { /* PC */
        #progress-circle-outer-container-pc { display:block; margin:auto auto; }
        #progress-circle-outer-container-mobile { display:none }
  }

    /*********** * REWARDS  ************************************************/ 
    .reputation, .certificatesCount { transform:translate(-50%, -50%) }
    .reputation { position:absolute; top:50%; left:50%; color:yellow; font-weight:bold; font-size:0.9em }
    .certificatesCount { position:absolute; top:31%; left:50%; color:blue; font-weight:bold; font-size:0.9em }
    .reputation.counting { display:inline-block; transform:translate(-50%, -50%) scale(1.4); background-color:orangered; border-radius:6px; box-shadow:0 0 8px orangered; transition:transform 0.2s, background-color 0.2s, box-shadow 0.2s }
    .score-badge-wrapper { border-radius:8px; transition:box-shadow .18s ease }
    .score-badge-wrapper #badge-img { transform-origin:center; transition:filter .18s ease, transform .18s ease }
    .score-badge-wrapper.is-awarding { animation:reputationBadgeAwardPulse .7s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255, 217, 90, .9), 0 0 12px rgba(255, 187, 0, .95) }
    .score-badge-wrapper.is-awarding #badge-img { filter:drop-shadow(0 0 3px rgba(255, 217, 90, .85)) }
    @keyframes reputationBadgeAwardPulse {
      0%, 100% { box-shadow:0 0 0 2px rgba(255, 217, 90, .85), 0 0 8px rgba(255, 187, 0, .75) }
      50% { box-shadow:0 0 0 3px rgba(255, 240, 163, 1), 0 0 16px rgba(255, 187, 0, 1) }
    }
    .tippy-box[data-theme~='gp-blue'] { background-color:rgb(180, 210, 251) !important; color:rgb(19, 35, 157) !important }
    .tippy-box[data-theme~='gp-blue'] > .tippy-arrow::before { color:rgb(180, 210, 251) !important }

    /*********** * JOURNAL REFERENCES *****************************************/
    #references { display:none }
    #referenceTooltip { border:1px solid #ccc; border-radius:4px; padding:8px 12px; max-width:300px; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); z-index:var(--z-popover); font-size:0.9em; background-color:#f0f0ff }
    sup.journalref { color:blue; cursor:pointer; display:none; font-size:9pt;vertical-align:text-top;}
    
    /*********** * STAR RATING ************************************************/
    .star-rating { display:inline-block; letter-spacing:-1px }
    .star-rating span { font-size:30px; cursor:pointer; color:#ccc; margin-right:0px }
    /* Use an empty star (☆) by default */
    .star-rating span::before { content:"\2606" }
    /* Hover state:turn stars gold and switch to the filled star (★) */
    .star-rating span.hover, .star-rating span.hover::before { color:gold; content:"\2605" }
    /* Selected state:also gold and filled star (★) */
    .star-rating span.selected, .star-rating span.selected::before { color:gold; content:"\2605" }
    /* Overall rating displayed in right panel*/
    .star-rating-tight { display:inline-flex; align-items:center; gap:0 }
    .filled-star, .half-star, .empty-star { font-size:20pt; display:inline-block; margin-right:-3px; line-height:1 }
    /* full star */
    .filled-star { color:gold }
    .filled-star::before { content:"★" }
    /* empty star */
    .empty-star { color:lightgray }
    .empty-star::before { content:"☆" }
    /* half star:start with empty, then overlay half a gold star */
    .half-star { position:relative; color:lightgray }
    .half-star::before { content:"☆" }
    .half-star::after { content:"★"; position:absolute; top:0; left:0; width:50%; overflow:hidden; color:gold }
    
    /* SPLASH IMAGE */
    .story-content .splash-image {width:100%; height: auto;}
    /* KEN BURNS */
    /* Only affects what you see *inside* CKEditor */
    .cke_editable .ken-burns-image { position:static !important; width:100%; max-width:768px; height:auto; object-fit:contain; animation:none !important }
    /* on browser - target the KB parent <p> */
    p:has(> img.ken-burns-image) { position:relative; overflow:hidden; }
    p:has(> img.ken-burns-image) > img.ken-burns-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 10s 1 }    
    @keyframes kenburns { 
      0% { transform:scale3d(1.1, 1.1, 1.1) translate3d(3.33%, 2.56%, 0) }
      5% { transform:scale3d(1.1, 1.1, 1.1) translate3d(3.33%, 2.56%, 0); animation-timing-function:ease-in-out }
      100% { transform:scale3d(1, 1, 1); animation-timing-function:ease-in-out }
    }
    

     /*********** *  ICON OVERLAYS ON IMAGES  ************************************************/
    /*
    <p class="with-icon" style="--icon-url: url('/images/shield-hand-purple.svg')">
     <img alt="" class="ken-burns-image" data-copyright="Mecourse Lifelong Learning. AI Generated."
     height="80" src="images/small-placeholder.jpg" style="position:relative;" width="900">
    </p>

    if icon not wanted, this will still work
    <p class="with-icon">
      <img …>
    </p>
    */
.with-icon { position:relative; margin:0; --icon-url:none }
.with-icon > img { display:block; width:100%; height:auto; object-fit:cover }
.with-icon::before { content:""; position:absolute; top:0; left:0; width:64px; height:64px; background:var(--icon-url) no-repeat center; background-size:contain; pointer-events:none; z-index:1 }



    /* prevent page space taken by google widget  */
    /* (it has visibility hidden, so takes up space */
    #___gcse_0 {position:absolute; left:-9999px;}

    body {font-size:1.1em;}

    /* MAIN MENU */
    #xmain-menu { font-family:Arial, sans-serif; background-color:#fff; padding:16px; width:250px; box-shadow:0 2px 4px rgba(0, 0, 0, 0.1) }
  .menu-close { background:none; border:none; font-size:24px; float:right; cursor:pointer }
  .menu-list { list-style:none; padding:0; margin:0px 0 0 0 }
  .menu-list li { margin-bottom:0px }
  .menu-list li a { text-decoration:none; color:#333; font-size:14px; display:flex; align-items:center }
  .menu-list li a:hover { color:#000 }
  nav#main-menu .menu-list li a > svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 18px !important;
    vertical-align: middle;
  }
  /* Make the logout POST button look like the menu <a> links */
  .menu-list li form { margin: 0; }

  .menu-list li form button {
    background: none;
    border: none;
    padding: 15px;
    /* match the <a> */
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* match hover */
  .menu-list li form button:hover { color: #000; }

  /* match icon sizing */
  nav#main-menu .menu-list li form button > svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 18px !important;
    vertical-align: middle;
  }

/* Make the logout form/button behave like the menu links */
.menu-list li form {
  width: 100%;
}

.menu-list li form button {
  width: 100%;
  display: block;              /* matches .menu-list a */
  text-align: left;            /* so text aligns like links */
  padding: 0.75rem 1rem;       /* match .menu-list a padding */
  color: inherit;
  background: none;
  border: 0;
  transition: background-color 0.2s ease;
}

/* Match the hover background exactly */
.menu-list li form button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Paper-like inputs only in learning/reflection/AI areas */
.cpd-user-input { border:1px solid #ddd; border-radius:8px; padding:10px 12px; background:#FFFBF2; color:#111; line-height:1.4; box-shadow:inset 0 1px 2px rgba(0, 0, 0, .06); outline:none }
.cpd-user-input:focus { border-color:#7aa7ff; box-shadow:0 0 0 3px rgba(122, 167, 255, .25), inset 0 1px 2px rgba(0, 0, 0, .06) }



    /* Keep at end */
    .hidden { display:none !important; }
    .gpHidden { display:none !important; }