@layer reset, tokens, base, layout, components, utilities, overlays;

@layer tokens {
  :root {
    --vy-bredd: 100dvw;
    --vy-hojd: 100dvh;
    --rot-delare-x: 90;
    --rot-delare-y: 56;
    --rot-skala: min(calc(var(--vy-bredd) / var(--rot-delare-x)), calc(var(--vy-hojd) / var(--rot-delare-y)));

    --kol-antal: 6;
    --rad-antal: 24;
    --kol-bredd: calc(var(--vy-bredd) / var(--kol-antal));
    --rad-hojd: calc(var(--vy-hojd) / var(--rad-antal));
    --rut-marginal: calc(var(--rot-skala) * 1.25);
    --rut-gap: calc(var(--rot-skala) * 0.75);

    --phi: 1.618;
    --varde-d: calc(var(--rot-skala) * 0.75);
    --varde-s: calc(var(--rot-skala) * 1);
    --varde-l: calc(var(--rot-skala) * var(--phi) * var(--phi));

    --typ-kropp: calc(var(--rad-hojd) * 0.38);
    --typ-ui: var(--typ-kropp);
    --typ-rubrik: var(--typ-kropp);
    --typ-hint: var(--typ-kropp);
    --typ-baseline-nudge: 0.1em;

    --huvud-rader: 2;
    --scen-rad-fran: 3;
    --scen-rad-till: 20;
    --fot-rad-fran: 22;
    --fot-rad-till: 23;
    --huvud-hojd: calc(var(--rad-hojd) * var(--huvud-rader));

    --farg-forsta: #363535;
    --farg-andra: #dedede;
    --farg-tredje: #e2ff52;
    --farg-fjarde: #5b94ff;

    --font-pc: "bxyz-pc", system-ui, sans-serif;
    --font-sans: "authentic-sans-condensed-60", system-ui, sans-serif;

    --kant: calc(var(--typ-kropp) / 12);
    --kant-stil: dotted;
    --radie-m: calc(var(--rot-skala) * 0.5);
    --radie-l: calc(var(--rot-skala) * 1);
    --yta-insats: var(--varde-d);

    --overgang-tid: 0.3s;
    --overgang-easning: cubic-bezier(0.2, 0.8, 0.2, 1);
    --opacitet-s: 0.7;
    --opacitet-m: 0.5;

    --z-chrome: 30;

    --grid-columns-wide: 6;
    --grid-columns-medium: 2;
    --grid-columns-narrow: 1;
    --grid-columns: var(--grid-columns-wide);
    --grid-template-columns-wide: var(--rut-marginal) repeat(var(--grid-columns-wide), minmax(0, 1fr)) var(--rut-marginal);
    --grid-template-columns-medium: var(--rut-marginal) repeat(var(--grid-columns-medium), minmax(0, 1fr)) var(--rut-marginal);
    --grid-template-columns-narrow: var(--rut-marginal) minmax(0, 1fr) var(--rut-marginal);
    --grid-template-columns: var(--grid-template-columns-wide);
    --grid-content: 2 / -2;

    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
  }

  @media (max-width: 48rem) {
    :root {
      --grid-columns: var(--grid-columns-narrow);
      --grid-template-columns: var(--grid-template-columns-narrow);
    }
  }

  @media (min-width: 48.0625rem) and (max-width: 64rem) {
    :root {
      --grid-columns: var(--grid-columns-medium);
      --grid-template-columns: var(--grid-template-columns-medium);
    }
  }
}

@layer reset {
  @font-face {
    font-family: "bxyz-pc";
    src: url("../assets/fonts/bxyz-pc-dot-matrix.ttf") format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "authentic-sans-condensed-60";
    src: url("../assets/fonts/authentic-sans-condensed-60.woff") format("woff");
    font-display: swap;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, p, button { margin: 0; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  html {
    font-size: var(--rot-skala);
    touch-action: manipulation;
    overscroll-behavior: none;
  }
}

@layer base {
  body {
    width: var(--vy-bredd);
    height: var(--vy-hojd);
    overflow: hidden;
    background: var(--farg-andra);
    color: var(--farg-forsta);
    font-family: var(--font-sans);
    font-size: var(--typ-kropp);
    line-height: 1.2;
    text-transform: lowercase;
    -webkit-font-smoothing: antialiased;
  }
}

@layer layout {
  .cp-app {
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    grid-template-rows: repeat(var(--rad-antal), var(--rad-hojd));
    column-gap: var(--rut-gap);
    width: var(--vy-bredd);
    height: var(--vy-hojd);
    overflow: hidden;
    position: relative;
  }

  .cp-huvud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-chrome);
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    align-items: center;
    column-gap: var(--rut-gap);
    height: var(--huvud-hojd);
    padding-block: 0;
    background: transparent;
    border-bottom: none;
    pointer-events: none;
  }

  .cp-huvud-inner {
    grid-column: var(--grid-content);
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--varde-d);
    min-width: 0;
  }

  .cp-title {
    font-family: var(--font-pc);
    font-size: var(--typ-rubrik);
    line-height: 1;
    margin-right: auto;
    translate: 0 calc(var(--typ-baseline-nudge) * 0.5);
  }

  .cp-verktyg-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--varde-d);
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
  }

  .cp-scen {
    grid-column: var(--grid-content);
    grid-row: var(--scen-rad-fran) / calc(var(--scen-rad-till) + 1);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--rut-gap);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    touch-action: none;
  }

  .cp-panel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--varde-d);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--yta-insats);
  }

  .cp-panel--rita {
    grid-column: 1 / 4;
    background: var(--farg-andra);
  }

  .cp-panel--duk {
    grid-column: 4 / 7;
    background: var(--farg-andra);
  }

  .cp-zoom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: var(--varde-d);
    align-self: stretch;
  }

  .cp-zoom__knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--rad-hojd) * 0.7);
    min-height: calc(var(--rad-hojd) * 0.9);
    padding: var(--varde-d);
    border-radius: var(--radie-m);
    font-family: var(--font-sans);
    font-size: var(--typ-ui);
    line-height: 1;
  }

  .cp-zoom__tecken {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .cp-yta-host {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .cp-yta-rulla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .cp-panel-duk-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--varde-s);
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .cp-fot {
    grid-column: var(--grid-content);
    grid-row: var(--fot-rad-fran) / calc(var(--fot-rad-till) + 1);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--rut-gap);
    align-items: end;
    min-width: 0;
    min-height: 0;
    height: auto;
    background: var(--farg-andra);
  }

  .cp-hint {
    grid-column: 1 / 4;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding-inline-end: var(--varde-s);
    font-size: var(--typ-hint);
    color: var(--farg-forsta);
    text-align: left;
    line-height: 1.2;
    min-height: calc(var(--rad-hojd) * 0.9);
    overflow-wrap: anywhere;
  }

  .cp-steg-lista {
    grid-column: 4 / 7;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--varde-d);
    min-width: 0;
    max-width: 100%;
    min-height: calc(var(--rad-hojd) * 0.9);
  }

  @media (min-width: 48.0625rem) and (max-width: 64rem) {
    .cp-panel--rita {
      grid-column: 1 / 2;
    }

    .cp-panel--duk {
      grid-column: 2 / 3;
    }

    .cp-hint {
      grid-column: 1 / 2;
    }

    .cp-steg-lista {
      grid-column: 2 / 3;
      justify-content: flex-end;
    }
  }

  @media (max-width: 48rem) {
    .cp-huvud-inner {
      flex-direction: column;
      align-items: center;
    }

    .cp-title {
      margin-right: 0;
    }

    .cp-verktyg-rad {
      margin-left: 0;
      justify-content: center;
    }

    .cp-hint {
      grid-column: 1;
      grid-row: auto;
      text-align: center;
      padding-inline-end: 0;
    }

    .cp-steg-lista {
      grid-column: 1;
      grid-row: auto;
      justify-content: center;
    }

    .cp-scen {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      row-gap: var(--rut-gap);
    }

    .cp-panel--rita {
      grid-column: 1;
      grid-row: 1;
    }

    .cp-panel--duk {
      grid-column: 1;
      grid-row: 2;
    }
  }
}

@layer components {
  .cp-yta {
    display: block;
    flex: 0 0 auto;
    width: var(--cp-logisk-b, auto);
    height: var(--cp-logisk-h, auto);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: default;
  }

  .cp-yta--rita {
    cursor: crosshair;
  }

  .cp-knapp,
  .cp-zoom__knapp,
  .cp-steg__knapp {
    background: var(--farg-tredje);
    color: var(--farg-forsta);
    transition: background var(--overgang-tid) var(--overgang-easning);
  }

  .cp-knapp:hover,
  .cp-knapp:active,
  .cp-knapp:focus-visible,
  .cp-zoom__knapp:hover,
  .cp-zoom__knapp:active,
  .cp-zoom__knapp:focus-visible,
  .cp-steg__knapp:hover,
  .cp-steg__knapp:active,
  .cp-steg__knapp:focus-visible {
    background: var(--farg-fjarde);
  }

  .cp-knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--rad-hojd) * 0.85);
    padding-inline: var(--varde-s);
    padding-block: 0;
    border-radius: var(--radie-l);
    font-family: var(--font-sans);
    font-size: var(--typ-ui);
    line-height: 1;
  }

  .cp-knapp[aria-pressed="true"],
  .cp-knapp[data-tillstand="vald"] {
    background: var(--farg-tredje);
  }

  .cp-knapp[aria-pressed="true"]:hover,
  .cp-knapp[aria-pressed="true"]:active,
  .cp-knapp[data-tillstand="vald"]:hover,
  .cp-knapp[data-tillstand="vald"]:active {
    background: var(--farg-fjarde);
  }

  .cp-knapp:disabled,
  .cp-knapp[data-tillstand="inaktiv"],
  .cp-zoom__knapp[data-tillstand="inaktiv"],
  .cp-knapp[data-tillstand="inaktiv"]:hover,
  .cp-knapp[data-tillstand="inaktiv"]:active,
  .cp-zoom__knapp[data-tillstand="inaktiv"]:hover,
  .cp-zoom__knapp[data-tillstand="inaktiv"]:active {
    background: var(--farg-tredje);
    opacity: var(--opacitet-m);
    cursor: not-allowed;
  }

  .cp-steg {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--varde-d) * 0.5);
    flex: 0 0 auto;
    width: max-content;
    min-height: calc(var(--rad-hojd) * 0.9);
    padding-inline: 0;
    padding-block: 0;
    font-family: var(--font-sans);
    font-size: var(--typ-ui);
    line-height: 1;
  }

  .cp-steg__etikett {
    text-align: center;
    white-space: nowrap;
    line-height: 1;
  }

  .cp-steg__piller {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--rad-hojd) * 0.7);
    padding-inline: calc(var(--varde-d) * 0.25);
    border-radius: var(--radie-m);
    background: var(--farg-andra);
  }

  .cp-steg__knapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: calc(var(--rad-hojd) * 0.55);
    height: 100%;
    min-height: calc(var(--rad-hojd) * 0.7);
    padding-inline: calc(var(--varde-d) * 0.25);
    padding-block: 0;
    line-height: 1;
  }

  .cp-steg__varde {
    display: inline-block;
    min-width: 1.25em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    padding-inline: calc(var(--varde-d) * 0.15);
  }

  .cp-garn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: calc(var(--varde-d) * 0.5);
    width: max-content;
    font-family: var(--font-sans);
    font-size: var(--typ-ui);
    line-height: 1;
  }

  .cp-garn__etikett {
    color: var(--farg-forsta);
    white-space: nowrap;
  }

  .cp-garn__piller {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--rad-hojd) * 0.9);
    padding-inline: var(--varde-s);
    border-radius: var(--radie-l);
    background: var(--farg-andra);
    cursor: pointer;
  }

  .cp-garn__input {
    width: calc(var(--rad-hojd) * 0.7);
    height: calc(var(--rad-hojd) * 0.7);
    padding: 0;
    border: none;
    border-radius: var(--radie-m);
    background: transparent;
    cursor: pointer;
  }
}

@layer utilities {
  .cp-visually-hidden {
    position: absolute;
    width: var(--kant);
    height: var(--kant);
    overflow: hidden;
    clip-path: inset(50%);
  }
}