@layer default, components;

/* fonts */
@font-face {
  font-display: swap;
  font-family: "Rethink Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/rethink-sans-v7-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Rethink Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/rethink-sans-v7-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Rethink Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/rethink-sans-v7-latin-600.woff2") format("woff2");
}
body {
  background: Canvas;
  color: CanvasText;
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  interpolate-size: allow-keywords;
  margin: 0;
}

.video-bg {
  height: 100%;
  object-fit: cover;
  position: fixed;
  width: 100%;
  z-index: -1;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

#app {
  /* Colors */
  --border: #ffffff26;
  --button-dark: #ffffff21;
  --divider: #0001;
  --green: #00ff00;
  --green-focus: #00cc00;
  --green-focus-dark: #009900;
  --gray-0: #ffffff;
  --gray-20: #f1f1f1;
  --gray-80: #373d46;
  --gray-100: #28292c;

  /* Spacing scale (4px base unit) */
  --unit-1: 0.25rem; /* 4px */
  --unit-1-5: 0.375rem; /* 6px */
  --unit-2: 0.5rem; /* 8px */
  --unit-2-5: 0.625rem; /* 10px */
  --unit-3-5: 0.875rem; /* 14px */
  --unit-4: 1rem; /* 16px */
  --unit-4-5: 1.125rem; /* 18px */
  --unit-5: 1.25rem; /* 20px */
  --unit-6: 1.5rem; /* 24px */
  --unit-8: 2rem; /* 32px */
  --unit-12: 3rem; /* 48px */
  --unit-16: 4rem; /* 64px */

  /* Font size scale */
  --text-xs: 0.6875rem; /* 11px */
  --text-sm: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px (base), not used */
  --text-xl: 2.5rem; /* 40px */
  --text-2xl: 3rem; /* 48px */

  /* Font weight scale */
  --weight-medium: 500;
  --weight-semibold: 600;

  color: light-dark(var(--gray-100), var(--gray-0));
  container-type: inline-size;
  font-family: "Rethink Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: var(--text-sm);
  font-style: normal;
  margin-inline: auto;
  max-width: 1200px;
  padding: var(--unit-4);
}

/* Layout */
.app {
  display: grid;
  gap: var(--unit-8);
  * {
    box-sizing: border-box;
  }
}

/* Base styles */

label {
  align-items: center;
  display: grid;
  gap: var(--unit-1);
  grid-auto-flow: column;
  justify-content: start;
  user-select: none;
}

svg {
  fill: currentColor;
}

/* Left side: form controls */
.controls {
  align-content: start;
  display: grid;
  row-gap: var(--unit-4-5);
  text-align: center;

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    font-family: "Rethink Sans", sans-serif;
    line-height: 1;
    margin: 0;
    text-box: cap alphabetic;
    color: inherit;
  }

  header {
    display: none;
    margin-inline: auto;
    max-width: 50ch;
    row-gap: var(--unit-4);
  }

  label:has([type="radio"]) {
    background: light-dark(var(--gray-20), var(--button-dark));
    border: 1px solid light-dark(#0000, var(--border));
    border-radius: var(--unit-5);
    color: light-dark(var(--gray-100), var(--gray-0));
    display: inline-grid;
    font-size: var(--text-sm);
    padding: var(--unit-2) var(--unit-4);
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);

    &:has(:checked) {
      background: var(--green);
      color: var(--gray-100);
    }
    &:has(:focus-visible) {
      box-shadow: inset 0 0 0 2px
        light-dark(var(--green-focus), var(--green-focus-dark));
    }
  }

  /* Range with scroller */
  label:has([type="range"]) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr min-content;
    margin-block: var(--unit-4);
    position: relative;
    row-gap: var(--unit-1-5);
    &:has(:focus-visible) {
      outline: 1px solid var(--gray-20);
      outline-offset: 4px;
    }
    &::after {
      /* GREEN SOLID LINE */
      background: var(--green);
      border-radius: 3px;
      content: "";
      display: block;
      grid-area: 1 / 1;
      height: 32px;
      place-self: center;
      pointer-events: none;
      width: 5px;
      z-index: 1;
    }
    &::before {
      /* TRIANGLE */
      background: var(--gray-100);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      content: "";
      height: 5px;
      place-self: center;
      pointer-events: none;
      width: 10px;
    }
    input {
      grid-area: 1 / 1;
      margin: 0;
    }
    [data-scroll] {
      cursor: grab;
      display: block;
      grid-area: 1 / 1;
      inset: 0;
      mask: linear-gradient(to right, #0000, #000 15%, #000 85%, #0000);
      overflow: hidden;
      position: absolute;
      touch-action: none;
      user-select: none;
      z-index: 0;

      [data-scroll-bg] {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        height: 100%;
        pointer-events: none;
        width: 200%;
        &::after {
          background-image: url("../svg/range-bg.svg");
          background-size: 50px 30px;
          background-repeat: repeat-x;
          content: "";
          grid-column: 2;
        }
      }
    }
  }

  [name="inc_out"] {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: 1;
  }
}

/* Right side: results display */
.result {
  border-radius: var(--unit-3-5);
  order: -1;
  reading-order: 1;

  article {
    background: var(--green);
    border-radius: var(--unit-2-5);
    color: var(--gray-100);
    padding: var(--unit-4) var(--unit-6);
  }

  h2 {
    align-items: baseline;
    column-gap: 0.5rem;
    display: flex;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    font-family: "Rethink Sans", sans-serif;
    margin: 0;
    small {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
    }
  }

  output[name="tot_fin"] {
    transform-origin: center;
    width: fit-content;
  }

  output[name="tot_fin"].is-animating {
    animation: tot-fin-pop 420ms ease;
  }

  header {
    display: grid;
    column-gap: var(--unit-4);
    grid-template-columns: 1fr; /* changed from 1fr 1fr */
    row-gap: var(--unit-3-5);
    output:not([hidden]) {
      display: block;
      font-weight: var(--weight-semibold);
    }
  }

  summary {
    cursor: pointer;
    user-select: none;
  }

  &:has(:checked) .result-table {
    height: max-content;
    transition: height ease-in 180ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  output[name="tot_fin"].is-animating {
    animation: none;
  }
}

/* Expandable breakdown table */
.result-table {
  height: 0;
  overflow: hidden;
  transition: height ease-out 180ms;

  fieldset.fieldset {
    display: grid;
    row-gap: var(--unit-1);
    padding: 0;
  }

  label {
    grid-template-columns: 2fr 1fr;
    & > :nth-child(2) {
      justify-self: end;
    }
    &:has([hidden]) {
      display: none;
    }
  }

  output {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
  }
}

.result-toggle input {
  display: none;
}
.result-toggle::after {
  content: "Se detaljer";
}
.result-toggle:has(:checked)::after {
  content: "Skjul detaljer";
}

.button-link {
  background: var(--gray-100);
  border-radius: 3px;
  color: var(--gray-0);
  grid-template-columns: 1fr;
  justify-self: start;
  padding: var(--unit-1-5) var(--unit-4);
  text-decoration: none;
  text-wrap: nowrap;
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
  &:has(:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--gray-0);
  }
}

.result-total {
  margin-block-start: var(--unit-1);
}

.textblock {
  padding-block-start: var(--unit-6);
}

/* Color Scheme toggle */
.color-scheme {
  place-content: center;
  svg {
    border-radius: 50%;
    fill: unset;
    transition: rotate 360ms ease, filter 360ms ease-out;
  }
  &:has(:checked) svg {
    filter: invert(1);
    rotate: 1turn;
  }
  &:has(:focus-visible) svg {
    outline: 1px solid #808080;
    outline-offset: 6px;
  }
}

/* Utility classes */
hr,
.textblock {
  border: none;
  border-top: 1px solid var(--divider);
  display: block;
  margin-block: var(--unit-6);
}

.label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.33px;
  margin-block-end: var(--unit-2-5);
  text-transform: uppercase;
}

.button-group:not([hidden]) div {
  background: light-dark(var(--gray-20), var(--button-dark));
  border: 1px solid light-dark(#0000, var(--border));
  border-radius: var(--unit-6);
  margin-inline: auto;
  padding: var(--unit-1);
  white-space: nowrap;
  width: fit-content;
  label {
    justify-content: center;
    min-width: var(--unit-8);
    &:not(:has(:checked)) {
      background: #0000;
      border-color: #0000;
    }
  }
}

.radio-group:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit-2);
  justify-content: center;
}

/* Hidden inputs */
input:is([type="checkbox"], [type="radio"]) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Responsive layout */
@container (min-width: 725px) {
  .app {
    grid-template-columns: 1fr 1fr;
  }
  .color-scheme {
    grid-column: 1 / span 2;
  }
  .controls {
    padding: var(--unit-16) var(--unit-12);
    row-gap: var(--unit-12);
  }
  .controls header {
    display: grid;
  }
  .result {
    /* background: var(--gray-100); */
    order: unset;
    padding: var(--unit-16) var(--unit-12);
  }
  .result header {
    grid-template-columns: 1fr;
  }
  .result-table {
    height: max-content;
  }
  .result-toggle {
    display: none;
  }
  [name="smr"] legend {
    border-block-start: 1px solid var(--divider);
    padding-block-start: var(--unit-6);
    width: 100%;
  }
}
@container (max-width: 1199px) {
  .controls-sub {
    display: contents;
  }
}
@container (min-width: 1200px) {
  .controls-sub {
    align-items: end;
    column-gap: var(--unit-12);
    display: flex;
    justify-content: center;
  }
}

@keyframes tot-fin-pop {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.08);
  }
  55% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Safari cannot use scoped styles on [type=range] */
[type="range"],
[type="range"]::-webkit-slider-runnable-track,
[type="range"]::-webkit-slider-thumb {
  appearance: none;
}