/* ==========================================================================
   PORTAL QUESTIONNAIRE MODAL — FINAL CLEAN CSS (copy/paste)
   Scope: everything is safely scoped to .portal-q-modal__panel
   ========================================================================== */

.portal-q-modal__panel{
  /* Palette */
  --portal-primary:   #567b84;
  --portal-secondary: #01253f;
  --portal-base:      #f5f7f6;
  --portal-accent:    #50759a;

  background: var(--portal-base);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(1, 37, 63, 0.35);
  position: relative;
}

/* Close (X) button: primary by default, secondary on hover */
.portal-q-modal__panel .portal-q-modal__close{
  background: var(--portal-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: 44px;
  height: 32px;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.portal-q-modal__panel .portal-q-modal__close:hover,
.portal-q-modal__panel .portal-q-modal__close:focus{
  background: var(--portal-secondary) !important;
  transform: translateY(-1px);
}
.portal-q-modal__panel .portal-q-modal__close:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(86,123,132,.28) !important;
}

/* Fluent Forms base */
.portal-q-modal__panel .fluentform{
  background: transparent !important;
}

/* ==========================================================================
   STEP HEADER: Title -> Progress bar -> Guidance
   (We use the hidden UL title list for the actual step title)
   ========================================================================== */

.portal-q-modal__panel .ff-step-header{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px;
  padding-bottom: 6px;
}

/* Hide default “Step X of Y - …” line */
.portal-q-modal__panel .ff-el-progress-status{
  display: none !important;
}

/* Step title (comes from the UL; Fluent toggles li display inline/none) */
.portal-q-modal__panel .ff-el-progress-title{
  display: block !important;
  order: 1 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important; /* nuke underline */
  font-weight: 700 !important;
  font-size: 36px !important;
  color: var(--portal-accent) !important;
}
.portal-q-modal__panel .ff-el-progress-title li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Progress bar wrapper */
.portal-q-modal__panel .ff-el-progress{
  order: 2 !important;
  width: 100%;
  max-width: 520px !important;
  margin: 0 auto !important;
  height: 12px !important;
  background: #e3e8ea !important;
  border-radius: 999px !important;
  position: relative !important;

  /* IMPORTANT: allow pseudo guidance text to show */
  overflow: visible !important;
}

/* Filled portion (left-aligned inside the bar) */
.portal-q-modal__panel .ff-el-progress-bar{
  height: 12px !important;
  border-radius: 999px !important;
  background: var(--portal-accent) !important;
  margin: 0 !important;
  display: block !important;
}

/* Remove percent text inside bar */
.portal-q-modal__panel .ff-el-progress-bar span{
  display: none !important;
}

/* Guidance UNDER the progress bar */
.portal-q-wrap[data-lang="en"] .portal-q-modal__panel .ff-el-progress::after{
  content: "Use the sliders to score each statement from 0 (not at all) to 10 (completely).";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--portal-secondary);
  opacity: .75;
  text-align: center;
}

.portal-q-wrap[data-lang="fr"] .portal-q-modal__panel .ff-el-progress::after{
  content: "Utilisez les curseurs pour évaluer chaque affirmation de 0 (pas du tout) à 10 (complètement).";
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--portal-secondary);
  opacity: .75;
  text-align: center;
}


/* Intro step only: hide progress bar + helper guidance */

/* Intro + Results: hide progress + helper */

.portal-q-modal__panel.portal-step-intro .ff-el-progress,
.portal-q-modal__panel.portal-step-results .ff-el-progress{
  display: none !important;
}

.portal-q-modal__panel.portal-step-intro .ff-el-progress::after,
.portal-q-modal__panel.portal-step-results .ff-el-progress::after{
  content: "" !important;
  display: none !important;
}


.portal-q-modal__panel .ff-step-header{
  margin-bottom: 36px;
}

.portal-q-modal__panel .ff-el-progress{
  margin-bottom: 24px !important;
}
/* ==========================================================================
   SLIDERS (range fields)
   ========================================================================== */

/* Reduce label spacing */
.portal-q-modal__panel .ff-el-input--label{
  margin-bottom: 6px !important;
}

/* Tighten wrapper */
.portal-q-modal__panel .ff_slider_wrapper{
  margin-top: 6px !important;
  position: relative;
  padding-bottom: 18px; /* space for min/max labels */
}

/* Slider track — 10 distinct grey zones */
.portal-q-modal__panel .rangeslider--horizontal{
  height: 8px !important;
  border-radius: 999px !important;

  background:
    /* tick markers */
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.18) 0,
      rgba(0,0,0,0.18) 1px,
      transparent 1px,
      transparent 10%
    ),
    /* stepped grey zones */
    linear-gradient(
      to right,
      #f2f3f5 0%,
      #f2f3f5 10%,
      #e9eaee 10%,
      #e9eaee 20%,
      #e0e2e7 20%,
      #e0e2e7 30%,
      #d7dae0 30%,
      #d7dae0 40%,
      #ced2d9 40%,
      #ced2d9 50%,
      #c5cad2 50%,
      #c5cad2 60%,
      #bcc2cb 60%,
      #bcc2cb 70%,
      #b3bac4 70%,
      #b3bac4 80%,
      #aab2bd 80%,
      #aab2bd 90%,
      #a1aab6 90%,
      #a1aab6 100%
    ) !important;

  box-shadow: none !important;
}


.portal-q-modal__panel .rangeslider--horizontal{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}


/* Filled track */
.portal-q-modal__panel .rangeslider__fill{
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--portal-accent) !important;
}

/* Handle */
.portal-q-modal__panel .rangeslider__handle{
  width: 18px !important;
  height: 18px !important;
  top: -5px !important;
  border: 2px solid var(--portal-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
}

/* Value display (centre number) */
.portal-q-modal__panel .ff_range_value{
  margin-top: 6px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #0e2230 !important;
  line-height: 1 !important;
}

/* Extremities 0 and 10 (smaller + softer than centre value) */
.portal-q-modal__panel .ff_slider_wrapper::before,
.portal-q-modal__panel .ff_slider_wrapper::after{
  position: absolute;
  bottom: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--portal-secondary);
  opacity: .55;
}
.portal-q-modal__panel .ff_slider_wrapper::before{ content:"0"; left: 0; }
.portal-q-modal__panel .ff_slider_wrapper::after{  content:"10"; right: 0; }

/* Hide calculation fields (ff-hidden-calc etc.) */
.portal-q-modal__panel input.ff-hidden-calc,
.portal-q-modal__panel .ff-hidden-calc{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   BUTTONS (Next / Previous / Submit)
   ========================================================================== */

/* Base button */
.portal-q-modal__panel .ff-btn{
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  transition: background-color .2s ease, transform .2s ease;
}

/* Next / Continue */
.portal-q-modal__panel .ff-btn-next{
  background: var(--portal-accent) !important;
  color: #fff !important;
}
.portal-q-modal__panel .ff-btn-next:hover,
.portal-q-modal__panel .ff-btn-next:focus{
  background: var(--portal-secondary) !important;
  transform: translateY(-1px);
}

/* Previous */
.portal-q-modal__panel .ff-btn-prev{
  background:  #3e3e3e !important;
  opacity: 0.65;
  color: #333 !important;
}
.portal-q-modal__panel .ff-btn-prev:hover,
.portal-q-modal__panel .ff-btn-prev:focus{
  background: #d8d8d8 !important;
  transform: translateY(-1px);
}

/* Submit (“See my results”) — match next button */
.portal-q-modal__panel .ff-btn-submit{
  background: var(--portal-accent) !important;
  color: #fff !important;
}
.portal-q-modal__panel .ff-btn-submit:hover,
.portal-q-modal__panel .ff-btn-submit:focus{
  background: var(--portal-secondary) !important;
  transform: translateY(-1px);
}

/* Step nav alignment: Previous left, Next right */
.portal-q-modal__panel .step-nav{
  margin-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px;
}
.portal-q-modal__panel .step-nav .ff-btn{
  min-width: 140px;
}

/* Final step container: keep Previous left, Submit right */
.portal-q-modal__panel .ff-step-t-container{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px;
  margin-top: 24px !important;
}
.portal-q-modal__panel .ff_submit_btn_wrapper{
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
}
.portal-q-modal__panel .ff_submit_btn_wrapper .ff-btn-submit{
  margin-left: auto !important; /* hard-right */
}

/* Focus polish (keyboard users) */
.portal-q-modal__panel .ff-btn:focus,
.portal-q-modal__panel .rangeslider__handle:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(80,117,154,.25) !important;
}
/* Step 1 Next button drifting left — force the nav wrapper to behave */
.portal-q-modal__panel .step-nav.ff_step_nav_last{
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

/* Neutralise Fluent’s inline float rules */
.portal-q-modal__panel .step-nav.ff_step_nav_last .ff-btn-next{
  float: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ===========================
   IMAGE NAV BUTTONS — FIXED SCALE
   =========================== */

/* Button container (clickable area) */
.portal-q-modal__panel .step-nav img.prev,
.portal-q-modal__panel .step-nav img.next{
  width: 48px;          /* ↓ was 64 */
  height: 48px;
  padding: 10px;        /* ↓ was 14 */
  border-radius: 10px;

  object-fit: contain;
  box-sizing: border-box;

  cursor: pointer;

  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;

  /* kill inline chaos */
  float: none !important;
  margin: 0 !important;
}

.portal-q-modal__panel .ff-btn-submit img{
  max-width: 48px !important;
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 10px;
  object-fit: contain;
}

.portal-q-modal__panel .step-nav img.next,
.portal-q-modal__panel .ff-btn-submit{
  background: var(--portal-accent);
}

.portal-q-modal__panel .step-nav img.prev{
  background: #3e3e3e;
  opacity: 0.75;
}

.portal-q-modal__panel .step-nav img:hover,
.portal-q-modal__panel .ff-btn-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ===========================
   SUBMIT BUTTON — FIX SIZE
   =========================== */

.portal-q-modal__panel .ff-btn-submit{
  padding: 0 !important;          /* kill inherited padding */
  width: 48px;                    /* control actual button size */
  height: 48px;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  background: var(--portal-accent) !important;
}

.portal-q-modal__panel .ff-btn-submit:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ===========================
   Snapshot substitle Results page
   =========================== */

.portal-snapshot-subtitle {
  color: #567B84;
  margin: 0;
}
.portal-pdf-btn{
  padding:12px 18px;
  border-radius:12px;
  border:1px solid #567B84;
  background:#fff;
  color:#567B84;
  font-weight:500;
  cursor:pointer;
  transition:all .2s ease;
}

.portal-pdf-btn:hover{
  background:#567B84;
  color:#fff;
}

.portal-pdf-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.portal-pdf-status {
    margin: 0 0 10px;
    color: #01253F!important;
}

.portal-wheel-line{
  margin-top: 4px;
}

.portal-wheel-primary{
  margin-top: 6px;
  font-size: 0.95rem;
  color: #01253f;
}

.portal-wheel-primary-value{
  font-weight: 600;
  color: #222;
}

/* =========================
   Discovery CTA (button on results page)
   ========================= */
.portal-discovery{
  text-align: center;
  margin-top: 18px;
}

.portal-discovery-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.65);
  background: transparent;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.portal-discovery-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.85);
  color: #ffffff; /* keep visible */
  transform: translateY(-1px);
}

.portal-discovery-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}

.portal-discovery-btn:active{
  transform: translateY(0px);
}

/* Message under the button on the page */
.portal-discovery-page-status{
  margin-top: 12px;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}

/* =========================
   Modal backdrop + panel
   ========================= */
.portal-discovery-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(1,37,63,.25);
  z-index: 999999;
}
.portal-discovery-modal[aria-hidden="false"]{ display:flex; }

.portal-discovery-panel{
  width: min(820px, 96vw);
  background: #f5f7f6;
  border-radius: 22px;
  padding: 26px 28px 22px;
  position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.portal-discovery-close{
  position: absolute;
  top: 18px;
  right: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #01253f;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s ease, transform .12s ease;
}

.portal-discovery-close:hover{
  opacity: 1;
  transform: scale(1.05);
}

.portal-discovery-close:focus{
  outline: none;
  box-shadow: none;
}


/* Headings */
.portal-discovery-title{
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.15;
  color: #01253f;
  letter-spacing: -0.02em;
}
.portal-discovery-sub{
  margin: 0 0 18px;
  color: rgba(1,37,63,.72);
  font-size: 15px;
}

/* =========================
   Form layout
   ========================= */
.portal-discovery-form{
  margin-top: 10px;
}

.portal-discovery-title{
  font-weight: 600;
}

.portal-discovery-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  align-items: start;
}

.portal-discovery-form label{
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #01253f;
}

.portal-discovery-form input,
.portal-discovery-form textarea{
  width: 100%;
  border: 1px solid rgba(1,37,63,.16);
  border-radius: 14px;
  padding: 12px 12px;
  background: #ffffff;
  font-size: 15px;
  color: #01253f;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.portal-discovery-form textarea{
  min-height: 130px;
  resize: vertical;
}

/* Make message span full width */
.portal-discovery-form label:nth-of-type(3){
  grid-column: 1 / -1;
}

/* Actions row */
.portal-discovery-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.portal-discovery-submit{
  appearance: none;
  border: 1px solid #567B84;
  background: #567B84;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.portal-discovery-submit:hover{
  background: #ffffff;
  color: #567B84;
  border-color: #567B84;
  transform: translateY(-1px);
}

.portal-discovery-submit:active{
  transform: translateY(0);
}

.portal-discovery-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}


/* Hide modal status by default (we'll show on page instead) */
.portal-discovery-status{
  display: none;
}

@media (max-width: 720px){
  .portal-discovery-grid{ grid-template-columns: 1fr; }
  .portal-discovery-title{ font-size: 28px; }
  .portal-discovery-actions{ justify-content: stretch; }
  .portal-discovery-submit{ width: 100%; }
}
.portal-therapist-key{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999999;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(1,37,63,.28);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.portal-therapist-key:hover{
  transform: translateY(-1px);
  background: rgba(1,37,63,.38);
  border-color: rgba(255,255,255,.55);
}

.portal-therapist-key:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(86,123,132,.25);
}
.portal-login-wrap{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
}

.portal-login-panel{
  width: min(760px, 96vw);
  background: #f5f7f6;
  border-radius: 22px;
  padding: 26px 28px 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

.portal-login-title{
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.15;
  color: #01253f;
}

.portal-login-sub{
  margin: 0 0 18px;
  color: rgba(1,37,63,.72);
  font-size: 15px;
}

/* wp_login_form markup */
#portal_therapist_loginform p{
  margin: 0 0 14px;
}
#portal_therapist_loginform label{
  display: block;
  font-weight: 600;
  color: #01253f;
  margin-bottom: 6px;
}
#portal_therapist_loginform input[type="text"],
#portal_therapist_loginform input[type="password"]{
  width: 100%;
  border: 1px solid rgba(1,37,63,.16);
  border-radius: 14px;
  padding: 12px 12px;
  background: #ffffff;
  font-size: 15px;
  color: #01253f;
}

#portal_therapist_loginform input[type="submit"]{
  appearance: none;
  border: 1px solid #567B84;
  background: #567B84;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

#portal_therapist_loginform input[type="submit"]:hover{
  background: #ffffff;
  color: #567B84;
  transform: translateY(-1px);
}

.portal-login-foot{
  margin: 8px 0 0;
  font-size: 14px;
}
.portal-login-foot a{
  color: #567B84;
  text-decoration: underline;
}

.portal-load-row{
  display:flex;
  align-items:center;
  margin:10px 0;
}

.portal-load-label{
  width:150px;
  font-weight:600;
}

.portal-load-bar-wrap{
  flex:1;
  height:12px;
  background:#e5e7eb;
  border-radius:6px;
  margin:0 10px;
  overflow:hidden;
}

.portal-load-bar{
  height:100%;
  background:#0f766e;
}

.portal-load-score{
  width:40px;
  text-align:right;
  font-weight:600;
}
/* ==========================================================================
   RESULTS PANEL — LOAD LADDER / DIAL GRID
   ========================================================================== */

.portal-results-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

/* Card base */
.portal-result-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px 14px 14px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

/* Dial canvas wrapper */
.portal-result-dial{
  margin-bottom: 10px;
}

/* Label */
.portal-result-label{
  font-size: 15px;
  font-weight: 600;
  color: var(--portal-secondary);
}

/* ===========================
   DEFAULT (non-selected)
   =========================== */

.portal-result-card.is-muted{
  opacity: 0.55;
  filter: saturate(0.7);
}

/* ===========================
   SELECTABLE (tie)
   =========================== */

.portal-result-card.is-selectable{
  border: 2px dashed var(--portal-accent);
  opacity: 1;
  cursor: pointer;
}

/* Hover = slight lift, not circus */
.portal-result-card.is-selectable:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Active / chosen */
.portal-result-card.is-selected{
  border: 2px solid var(--portal-accent);
  background: rgba(80,117,154,0.06);
}

/* ===========================a
   HELPER BAR
   =========================== */

.portal-results-helper{
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 12px;

  background: rgba(80,117,154,0.10); /* soft accent tint */
  border: 1px solid rgba(80,117,154,0.25);

  color: var(--portal-accent);
  font-size: 14px;
  text-align: center;
}

/* ===========================
   CTA BUTTON (optional polish)
   =========================== */

.portal-results-cta{
  margin-top: 26px;
  text-align: center;
}

.portal-results-cta button{
  background: var(--portal-primary);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portal-results-cta button:hover{
  background: var(--portal-secondary);
}
/* ===========================
   DIAL
   =========================== */

.portal-dial{
  width: 120px;
  height: 60px;
  position: relative;
  margin: 0 auto;
}

.portal-dial::before,
.portal-dial-fill,
.portal-dial::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;

  /* show only the top half */
  clip-path: inset(0 0 50% 0);
}

/* Grey ring base */
.portal-dial::before{
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);

  background:
    conic-gradient(
      from 270deg,
      #dfe6ea 0deg,
      #dfe6ea var(--deg),
      transparent var(--deg),
      transparent 360deg
    );

  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 48%, #000 49%, #000 75%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 48%, #000 49%, #000 75%, transparent 76%);
}

/* Blue filled ring */
.portal-dial-fill{
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);

  background:
    conic-gradient(
      from 270deg,
      #d9e2ec 0deg 18deg,
      #cbd6e2 18deg 36deg,
      #bdcad8 36deg 54deg,
      #afbfce 54deg 72deg,
      #a1b4c4 72deg 90deg,
      #93a9ba 90deg 108deg,
      #859eb0 108deg 126deg,
      #7793a6 126deg 144deg,
      #69889c 144deg 162deg,
      #5b7d92 162deg 180deg,
      transparent 180deg 360deg
    );

  /* THIS is what cuts it at the score */
  -webkit-mask-image: conic-gradient(
    from 270deg,
    #000 0deg,
    #000 var(--deg),
    transparent var(--deg),
    transparent 360deg
  );
  mask-image: conic-gradient(
    from 270deg,
    #000 0deg,
    #000 var(--deg),
    transparent var(--deg),
    transparent 360deg
  );
}

.portal-dial,
.portal-dial *{
  transform: none !important;
}