@layer layout {
  .yta {
    position: relative;
    z-index: 1;
  }

  .yta:not(:has(.sida-grid)) {
    min-height: 100dvh;
    padding: var(--grid-margin);
  }

  .grid-ref {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-out;
  }

  body:has(#grid-ref-vis:checked) .grid-ref {
    opacity: var(--grid-ref-opacitet);
    visibility: visible;
  }

  .grid-ref__ram {
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--grid-margin);
    border: 1px solid var(--linje-margin);
    box-sizing: border-box;
    background: transparent;
    overflow: hidden;
  }

  .grid-ref__rutnat {
    display: grid;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    column-gap: var(--grid-col-gap);
    row-gap: var(--grid-row-gap);
    align-content: stretch;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows), minmax(0, var(--rh-rad)));
  }

  .grid-ref__cell {
    position: relative;
    min-height: 0;
    border: 1px solid var(--linje-cell);
    background: transparent;
  }

  .grid-ref__cell::before {
    content: attr(data-kol) " / " attr(data-rad);
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 3px;
    color: var(--linje-cell);
    pointer-events: none;
  }

  .grid-ref__rutnat--mobil { display: none; }

  @media (max-width: 768px) {
    .grid-ref__rutnat--bred:not(:only-child) { display: none; }
    .grid-ref__rutnat--mobil { display: grid; }
  }
}

@layer utilities {
  [data-grid] :is(.scroll-dold, .dold-rullning, .galleri-flode) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-grid] :is(.scroll-dold, .dold-rullning, .galleri-flode)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .grid-ref-styr {
    position: fixed;
    inset-block-end: var(--grid-margin);
    inset-inline-end: var(--grid-margin);
    z-index: 9100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--linje-cell);
    background: #fff;
    pointer-events: auto;
    cursor: pointer;
  }

  .grid-ref-styr input { accent-color: var(--linje-kol); }
}