/* ============================================================================
   Temperature Gauge — a separate component, taken direct from the app
   ============================================================================ */


:root {
  --temperature-guage-width: 80px;
  --temperature-guage-width-number: 80; /* must be same as --temperature-guage-width but without 'px' for calculations */
}

@property --temperature-rotate-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --border-color {
    syntax: '<color>';
    inherits: false;
    initial-value: var(--foreground-very-muted);
}
@property --previous-border-color {
    syntax: '<color>';
    inherits: false;
    initial-value: var(--foreground-very-muted);
}
@property --previous-opacity {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}


.temperature-gauge{
    display: grid;
    grid-template-columns: auto 1fr;
    justify-self: center;
    gap: 0.5rem;
    position: relative;
    margin-top: 10px !important;
    margin-bottom: -10px !important;
    & .horizontal-gauge{
      height: 10px;
      margin-top: 6px !important;
      border-radius: 2px;
    }
}

.temperature-gauges{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}

.card-temperature-gauge{
    max-width: 400px !important;
  width: 100%;
  min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

.temperature-gauge-container{
  --border-color: var(--foreground-very-muted);
  --border-width: 3px;
  --temperature-animation-duration: 1s;

  display: grid;
  place-items: center;
  position: relative;
  border: var(--border-width) solid transparent;
  background:   linear-gradient(to bottom, var(--bg-000), var(--bg-000)) padding-box,
                conic-gradient( from var(--temperature-rotate-deg), white 0%, var(--border-color) 15%, var(--border-color) 85%, white 100%) border-box;
  width: 210px;
  max-width: 100%;
  min-width: 0;
  height: 100px;
  overflow: clip;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 0;
  animation:border-pulse var(--temperature-animation-duration, 2s) ease-in-out forwards;
  &.previous-red{
    --previous-border-color: var(--colour-temp-hot);
    --previous-border-color-highlight: var(--colour-temp-hot);
  }
  &.previous-amber{
    --previous-border-color: var(--colour-temp-warm);
    --previous-border-color-highlight: var(--colour-temp-warm);
  }
  &.previous-blue{
    --previous-border-color: var(--colour-temp-cold);
    --previous-border-color-highlight: var(--colour-temp-cold);
  }
  &.red{
    --border-color: var(--colour-temp-hot);
    --border-color-highlight: var(--colour-temp-hot);
  }
  &.amber{
    --border-color: var(--colour-temp-warm);
    --border-color-highlight: var(--colour-temp-warm);
  }
  &.blue{
    --border-color: var(--colour-temp-cold);
    --border-color-highlight: var(--colour-temp-cold);
  }
  &::before, &::after{
    position: absolute;
    content: "";
    border: var(--border-width) solid transparent;
    inset: calc((var(--border-width) * -1) - 2px);
  }
  &.has-changed-colour::before{
    --previous-opacity: 1;
    animation: rotate-temperature var(--temperature-animation-duration, 2s) linear forwards; 
  }
  &::before{
    opacity: 1;
    border-radius: inherit;
    z-index: -2;
    background: conic-gradient( from 0deg, var(--bg-000), var(--bg-000)) padding-box,
                conic-gradient( from var(--temperature-rotate-deg), var(--border-color-highlight) 0%, var(--border-color) 15%, var(--border-color) 85%, var(--border-color-highlight) 100%) border-box;
  }
  &::after{
    border-radius: inherit;
    z-index: -1;
    background:   linear-gradient(to bottom, var(--bg-000), var(--bg-000)) padding-box,
    conic-gradient( from var(--temperature-rotate-deg), var(--previous-border-color-highlight) 0%, var(--previous-border-color) 15%, var(--previous-border-color) 85%, var(--previous-border-color-highlight) 100%) border-box;
    opacity: var(--previous-opacity); 
  }
  &.has-changed-colour::after{
    animation:  rotate-temperature var(--temperature-animation-duration, 2s) linear forwards,
                change-highlight var(--temperature-animation-duration, 2s) linear forwards; 
  }

  & .temperature-guage .temperature-percentage-level{
    position: absolute;
    top: -2px;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    background: transparent;
  }
  
  & .temperature-guage .temperature-percentage-level::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--foreground);
  }
  & .temperature-guage .temperature-percentage-level.blue::after{
    border-top-color: var(--option-color-blue-text);
  }
  & .temperature-guage .temperature-percentage-level.amber::after{
    border-top-color: var(--option-color-amber-text);
  }
  & .temperature-guage .temperature-percentage-level.red::after{
    border-top-color: var(--option-color-red-text);
  }

  .temperature-score-figures{
    font-size: 0.7rem;
    color: var(--foreground-very-muted);
    margin-left: 5px;
  }
}

@keyframes rotate-temperature {
    0% {
        --temperature-rotate-deg: 0deg;
        --previous-opacity: 1;
    }
    100% {
        --temperature-rotate-deg: 720deg;
        --previous-opacity: 0;
    }
}


@keyframes change-highlight {
    0% {
        --border-color-highlight: white;
        --previous-border-color-highlight: white;
    }
    90% {
        --border-color-highlight: white;
        --previous-border-color-highlight: white;
    }
    100% {
        --border-color-highlight: var(--border-color);
        --previous-border-color-highlight: var(--border-color);
    }
}

.temperature-gauge {
    --gauge-thickness: clamp(8px, 16%, 14px);
    --gauge-break-color: var(--bg-500);
    --gauge-readout-bg: color-mix(in oklab, var(--bg-900) 85%, transparent);
    --gauge-needle-color: red;

    position: relative;
    aspect-ratio: 2 / 1;
    align-self: start;
    margin: 0;
}

.temperature-gauge__label{
    position: absolute;
    left:0;
    top: 0;
    color: var(--foreground-muted);
}
.temperature-gauge__arc,
.temperature-gauge__breaks {
    position: absolute;
    inset: 0;
    border-radius: 100% 100% 0 0 / 200% 200% 0 0;
    overflow: hidden;
}

.temperature-gauge__arc::before,
.temperature-gauge__breaks::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-mask: radial-gradient(circle farthest-side at 50% 100%, transparent calc(100% - var(--gauge-thickness)), #000 calc(100% - var(--gauge-thickness) + 1px));
    mask: radial-gradient(circle farthest-side at 50% 100%, transparent calc(100% - var(--gauge-thickness)), #000 calc(100% - var(--gauge-thickness) + 1px));
}

.temperature-gauge__arc::before {
    /* Center is at bottom-center (50% 100%). from 270deg = pointing left = left edge of arc.
       The visible 180deg sweep maps to 0%→50% of the gradient.
       Score stop % = score / 2  (e.g. score 40 → 20%, score 100 → 50%) */
    background: conic-gradient(from 270deg at 50% 100%,
            oklch(from var(--colour-temp-hot) l c h)    0%,
            oklch(from var(--colour-temp-hot) l c h)   15%,
            oklch(from var(--colour-temp-hot) l c h)   28%,
            oklch(from var(--colour-temp-warm) l c h) 32%,
            oklch(from var(--colour-temp-warm) l c h) 38%,
            oklch(from var(--colour-temp-cold) l c h)  42%,
            oklch(from var(--colour-temp-cold) l c h)  50%);
}

.temperature-gauge__breaks::before {
    /* Same from 270deg origin; 36deg = every 10% of full circle = every 20% of score */
    background: repeating-conic-gradient(from 270deg at 50% 100%,
            transparent 0deg,
            transparent 34.2deg,
            var(--gauge-break-color) 34.2deg,
            var(--gauge-break-color) 36deg);
    opacity: 0.9;
    opacity: 0;
}

.temperature-gauge__needle {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: calc(50% - (var(--gauge-thickness) * 0.5));
    background: linear-gradient(to top,
            color-mix(in oklab, var(--gauge-needle-color) 55%, transparent),
            var(--gauge-needle-color));
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(calc(-90deg + (var(--gauge-value) * 1.8deg)));
    border-radius: 999px;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--bg-900) 35%, transparent);
}

.temperature-gauge__hub {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    background: var(--gauge-needle-color);
    box-shadow: 0 0 0 2px var(--bg-900);
}

.temperature-gauge__readout {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--foreground-muted);
    background: var(--gauge-readout-bg);
    padding: 2px 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--foreground) 20%, transparent);
}

.temperature-gauge__status-badge {
    --badge-angle: -27deg;
    --badge-radius: 64%;

    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    max-width: 100%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.62rem;
    z-index: 3;
    
    & .badge{
      width: min(80px, 100%);
        position: absolute;
        left: 0;
        top: 24px;
        border: none;
        border-radius: 50%;
        background: transparent;
        text-transform: uppercase;
        text-align: center;
        font-size: 0.7rem;
      & span{
        margin-left: 0.25rem;
      }
    }
    & .badge-temp--red{
      color: oklch(from var(--colour-temp-hot) 80% 0.050 h / 1);
    }
    & .badge-temp--amber{
      color: oklch(from var(--colour-temp-warm) 80% 0.050 h / 1);
    }
    & .badge-temp--blue{
      color: oklch(from var(--colour-temp-cold) 80% 0.050 h / 1);
    }
}


.temperature-gauge__status-badge .badge.has-changed-colour  {
    opacity: var(--previous-opacity, 1);
    z-index: 4;
    animation: rotate-temperature var(--temperature-animation-duration, 2s) linear forwards;
} 

/* ============================================================================
   Responsive tweaks
   ============================================================================ */

@media (max-width: 1024px) {
  .temperature-gauges{
    grid-template-columns: 1fr;
    gap: 3rem;
    
  }

  .temperature-gauges .card-temperature-gauge:nth-of-type(2){
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    top: -10000px;
  }
}