@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

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

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: var(--vodleux-none);
    padding: var(--vodleux-none);
    border-radius: var(--vodleux-border-radius);
  }

  html {
    -webkit-text-size-adjust: var(--vodleux-full);
    text-size-adjust: var(--vodleux-full);
  }

  svg {
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    --vodleux-none: 0;
    --vodleux-full: 100%;
    --vodleux-grow: 1;
    --vodleux-border-radius: 0;

    --vodleux-unit: 4px;
    --vodleux-line: 1px;
    --vodleux-space-s: calc(var(--vodleux-unit) * 2);
    --vodleux-space-m: calc(var(--vodleux-unit) * 4);
    --vodleux-space-l: calc(var(--vodleux-unit) * 6);
    --vodleux-space-page: calc(var(--vodleux-unit) * 18);

    --vodleux-color-page: #dfe3ea;
    --vodleux-color-text: #0c1b33;
    --vodleux-color-border: #8798b6;
    --vodleux-color-light: #ffffff;
    --vodleux-color-light-soft: #f7f8fa;
    --vodleux-color-flag: #e30a17;
    --vodleux-opacity-soft: 50%;
    --vodleux-color-border-soft: color-mix(in srgb, var(--vodleux-color-border) var(--vodleux-opacity-soft), var(--vodleux-color-page));
    --vodleux-color-muted: color-mix(in srgb, var(--vodleux-color-text) var(--vodleux-opacity-soft), var(--vodleux-color-page));

    --vodleux-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vodleux-font-size-s: 0.75rem;
    --vodleux-font-size-m: 0.875rem;
    --vodleux-font-size-l: 1rem;
    --vodleux-font-weight-regular: 400;
    --vodleux-font-weight-strong: 600;
    --vodleux-line-height-s: calc(var(--vodleux-unit) * 4);
    --vodleux-line-height-m: calc(var(--vodleux-unit) * 5);
    --vodleux-line-height-l: calc(var(--vodleux-unit) * 6);

    --vodleux-content-width: calc(var(--vodleux-unit) * 152);
    --vodleux-frame-width: calc(var(--vodleux-content-width) + (var(--vodleux-space-l) + var(--vodleux-line) * 2) * 2);
    --vodleux-header-height: calc(var(--vodleux-unit) * 12);

    --vodleux-button-size: calc(var(--vodleux-unit) * 9);
    --vodleux-icon-size: calc(var(--vodleux-unit) * 5);
    --vodleux-icon-stroke: 1.5px;
    --vodleux-cell-height: calc(var(--vodleux-unit) * 6);
    --vodleux-flag-width: calc(var(--vodleux-unit) * 4.5);
    --vodleux-flag-height: calc(var(--vodleux-unit) * 3);

    --vodleux-focus-width: calc(var(--vodleux-line) * 2);
    --vodleux-focus-offset: calc(var(--vodleux-line) * 2);

    --vodleux-tick-width: calc(var(--vodleux-line) * 2);
    --vodleux-tick-long: calc(var(--vodleux-unit) * 2);
    --vodleux-tick-mid: var(--vodleux-unit);
    --vodleux-tick-short: calc(var(--vodleux-unit) / 2);
    --vodleux-tick-period-long: calc(var(--vodleux-unit) * 10);
    --vodleux-tick-period-even: calc(var(--vodleux-unit) * 2);
    --vodleux-tick-inset: calc(var(--vodleux-tick-long) + var(--vodleux-line));
    --vodleux-tick-anchor-x: calc(var(--vodleux-space-l) + var(--vodleux-line) - var(--vodleux-tick-inset));
    --vodleux-tick-anchor-y: calc(var(--vodleux-space-l) * 2 + var(--vodleux-header-height) - var(--vodleux-tick-inset));

    --vodleux-fill-light: linear-gradient(var(--vodleux-color-light), var(--vodleux-color-light));
    --vodleux-tick-across: linear-gradient(
      to right,
      var(--vodleux-color-border-soft) var(--vodleux-line),
      var(--vodleux-color-light) var(--vodleux-none) var(--vodleux-tick-width),
      transparent var(--vodleux-none)
    );
    --vodleux-tick-down: linear-gradient(
      to bottom,
      var(--vodleux-color-border-soft) var(--vodleux-line),
      var(--vodleux-color-light) var(--vodleux-none) var(--vodleux-tick-width),
      transparent var(--vodleux-none)
    );
  }
}

@layer base {
  body {
    min-block-size: 100dvh;
    padding-block: var(--vodleux-space-page);
    padding-inline: var(--vodleux-space-m);
    background-color: var(--vodleux-color-page);
    color: var(--vodleux-color-text);
    font-family: var(--vodleux-font-family);
    font-size: var(--vodleux-font-size-m);
    font-weight: var(--vodleux-font-weight-regular);
    line-height: var(--vodleux-line-height-l);
    overflow-wrap: break-word;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  a,
  svg {
    -webkit-user-drag: none;
    user-drag: none;
  }

  :focus-visible {
    outline: var(--vodleux-focus-width) solid var(--vodleux-color-text);
    outline-offset: var(--vodleux-focus-offset);
  }
}

@layer layout {
  .vodleux-frame {
    position: relative;
    container-type: inline-size;
    inline-size: min(var(--vodleux-full), var(--vodleux-frame-width));
    margin-inline: auto;
    padding: var(--vodleux-line);
    border: var(--vodleux-line) solid var(--vodleux-color-border-soft);
    background-color: var(--vodleux-color-page);
    background-image:
      var(--vodleux-fill-light),
      var(--vodleux-fill-light),
      var(--vodleux-fill-light),
      var(--vodleux-fill-light);
    background-size:
      var(--vodleux-full) var(--vodleux-line),
      var(--vodleux-full) var(--vodleux-line),
      var(--vodleux-line) var(--vodleux-full),
      var(--vodleux-line) var(--vodleux-full);
    background-position: top, bottom, left, right;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-clip: padding-box;

    &::before,
    &::after {
      content: "";
      position: absolute;
      pointer-events: none;
      background-repeat: repeat-x;
    }

    &::before {
      inset: var(--vodleux-line) var(--vodleux-tick-inset);
      background-image:
        var(--vodleux-tick-across),
        var(--vodleux-tick-across),
        var(--vodleux-tick-across),
        var(--vodleux-tick-across),
        var(--vodleux-tick-across),
        var(--vodleux-tick-across);
      background-size:
        var(--vodleux-tick-period-long) var(--vodleux-tick-long),
        var(--vodleux-tick-period-even) var(--vodleux-tick-mid),
        var(--vodleux-tick-period-even) var(--vodleux-tick-short),
        var(--vodleux-tick-period-long) var(--vodleux-tick-long),
        var(--vodleux-tick-period-even) var(--vodleux-tick-mid),
        var(--vodleux-tick-period-even) var(--vodleux-tick-short);
      background-position:
        var(--vodleux-tick-anchor-x) top,
        var(--vodleux-tick-anchor-x) top,
        calc(var(--vodleux-tick-anchor-x) + var(--vodleux-unit)) top,
        var(--vodleux-tick-anchor-x) bottom,
        var(--vodleux-tick-anchor-x) bottom,
        calc(var(--vodleux-tick-anchor-x) + var(--vodleux-unit)) bottom;
    }

    &::after {
      inset: var(--vodleux-tick-inset) var(--vodleux-line);
      background-repeat: repeat-y;
      background-image:
        var(--vodleux-tick-down),
        var(--vodleux-tick-down),
        var(--vodleux-tick-down),
        var(--vodleux-tick-down),
        var(--vodleux-tick-down),
        var(--vodleux-tick-down);
      background-size:
        var(--vodleux-tick-long) var(--vodleux-tick-period-long),
        var(--vodleux-tick-mid) var(--vodleux-tick-period-even),
        var(--vodleux-tick-short) var(--vodleux-tick-period-even),
        var(--vodleux-tick-long) var(--vodleux-tick-period-long),
        var(--vodleux-tick-mid) var(--vodleux-tick-period-even),
        var(--vodleux-tick-short) var(--vodleux-tick-period-even);
      background-position:
        left var(--vodleux-tick-anchor-y),
        left var(--vodleux-tick-anchor-y),
        left calc(var(--vodleux-tick-anchor-y) + var(--vodleux-unit)),
        right var(--vodleux-tick-anchor-y),
        right var(--vodleux-tick-anchor-y),
        right calc(var(--vodleux-tick-anchor-y) + var(--vodleux-unit));
    }
  }

  .vodleux-section {
    padding-block: var(--vodleux-space-l) calc(var(--vodleux-space-l) - var(--vodleux-line));
    padding-inline: var(--vodleux-space-l);

    &:last-child {
      padding-block-end: var(--vodleux-space-l);
    }

    & + .vodleux-section {
      border-block-start: var(--vodleux-line) solid var(--vodleux-color-border-soft);
      background-image: var(--vodleux-fill-light);
      background-size: var(--vodleux-full) var(--vodleux-line);
      background-position: top;
      background-repeat: no-repeat;
    }
  }
}

@layer components {
  .vodleux-name {
    font-size: var(--vodleux-font-size-l);
    font-weight: var(--vodleux-font-weight-strong);
    line-height: var(--vodleux-line-height-l);
  }

  .vodleux-handle {
    color: var(--vodleux-color-muted);
    line-height: var(--vodleux-line-height-m);
  }

  .vodleux-identity {
    display: flex;
    flex-direction: column;
    gap: var(--vodleux-unit);
    min-block-size: var(--vodleux-header-height);
  }

  .vodleux-bio {
    display: grid;
    gap: var(--vodleux-space-m);

    & p {
      text-wrap: pretty;
    }
  }

  .vodleux-link {
    text-decoration: underline;
    text-underline-offset: var(--vodleux-focus-offset);
  }

  .vodleux-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vodleux-space-s);
  }

  .vodleux-button {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--vodleux-button-size);
    block-size: var(--vodleux-button-size);
    border: var(--vodleux-line) solid;
    border-color: var(--vodleux-color-light) var(--vodleux-color-text) var(--vodleux-color-text) var(--vodleux-color-light);
    color: var(--vodleux-color-text);

    &::before {
      content: "";
      position: absolute;
      inset: var(--vodleux-none);
      border: var(--vodleux-line) solid;
      border-color: var(--vodleux-color-light-soft) var(--vodleux-color-border) var(--vodleux-color-border) var(--vodleux-color-light-soft);
      pointer-events: none;
    }

    &:active {
      border-color: var(--vodleux-color-text) var(--vodleux-color-light) var(--vodleux-color-light) var(--vodleux-color-text);

      &::before {
        border-color: var(--vodleux-color-border) var(--vodleux-color-light-soft) var(--vodleux-color-light-soft) var(--vodleux-color-border);
      }

      & .vodleux-icon {
        translate: var(--vodleux-line) var(--vodleux-line);
      }
    }
  }

  .vodleux-icon {
    inline-size: var(--vodleux-icon-size);
    block-size: var(--vodleux-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--vodleux-icon-stroke);
    stroke-linecap: square;
    stroke-linejoin: miter;

    & * {
      vector-effect: non-scaling-stroke;
    }
  }

  .vodleux-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vodleux-unit);
  }

  .vodleux-cell {
    display: flex;
    align-items: center;
    gap: var(--vodleux-space-s);
    block-size: var(--vodleux-cell-height);
    padding-inline: var(--vodleux-space-s);
    border: var(--vodleux-line) solid;
    border-color: var(--vodleux-color-border-soft) var(--vodleux-color-light) var(--vodleux-color-light) var(--vodleux-color-border-soft);
    color: var(--vodleux-color-muted);
    font-size: var(--vodleux-font-size-s);
    line-height: var(--vodleux-line-height-s);
    white-space: nowrap;
  }

  .vodleux-cell-grow {
    flex-grow: var(--vodleux-grow);
  }

  .vodleux-upper {
    text-transform: uppercase;
  }

  .vodleux-clock {
    font-variant-numeric: tabular-nums;
  }

  .vodleux-flag {
    flex: none;
    inline-size: var(--vodleux-flag-width);
    block-size: var(--vodleux-flag-height);
  }

  .vodleux-flag-field {
    fill: var(--vodleux-color-flag);
  }

  .vodleux-flag-mark {
    fill: var(--vodleux-color-light);
  }
}

@layer components {
  @container (max-width: 32rem) {
    .vodleux-cell {
      flex-grow: var(--vodleux-grow);
    }

    .vodleux-cell-grow {
      flex-basis: var(--vodleux-full);
    }
  }
}