@layer reset, base, components;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body, h1, h2, h3, p, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  input, button, textarea {
    font: inherit;
    color: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer base {
  :root {
    color-scheme: light dark;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --space: 1rem;
    --space-half: 0.5rem;
    --space-double: 2rem;

    --text-small: 0.875rem;
    --text-medium: 1.1rem;
    --text-large: 1.5rem;
    --text-x-large: 1.875rem;

    --canvas: oklch(100% 0 0);
    --ink: oklch(26% 0.05 264);
    --ink-dark: oklch(56% 0.014 260);
    --ink-medium: oklch(70% 0.008 258);
    --ink-light: oklch(86% 0.005 256);
    --ink-lighter: oklch(93% 0.003 254);
    --ink-lightest: oklch(97% 0.002 252);
    --ink-inverted: oklch(100% 0 0);
    --link: oklch(57% 0.19 260);
    --selected: oklch(93% 0.03 254);
    --negative: oklch(57% 0.19 30);

    --radius: 0.5em;
    --shadow:
      0 0 0 1px oklch(0% 0 0 / 5%),
      0 0.2em 0.4em oklch(0% 0 0 / 4%),
      0 0.6em 1.2em oklch(0% 0 0 / 4%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --canvas: oklch(20% 0.02 240);
      --ink: oklch(96% 0.01 260);
      --ink-dark: oklch(74% 0.015 260);
      --ink-medium: oklch(56% 0.015 260);
      --ink-light: oklch(38% 0.018 250);
      --ink-lighter: oklch(28% 0.02 245);
      --ink-lightest: oklch(24% 0.02 242);
      --ink-inverted: oklch(15% 0.02 240);
      --link: oklch(74% 0.13 256);
      --selected: oklch(34% 0.06 256);
      --negative: oklch(74% 0.14 35);
      --shadow:
        0 0 0 1px oklch(100% 0 0 / 6%),
        0 0.2em 0.4em oklch(0% 0 0 / 40%),
        0 0.6em 1.2em oklch(0% 0 0 / 30%);
    }
  }

  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--link);
    text-underline-offset: 0.2em;
  }

  main {
    display: grid;
  }

  :focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
  }

  ::selection {
    background: var(--selected);
  }
}

@layer components {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: var(--space) clamp(var(--space), 3vw, var(--space-double));
  }

  .header__account {
    display: flex;
    align-items: center;
    gap: var(--space);
    min-width: 0;
    font-size: var(--text-small);
    color: var(--ink-dark);
  }

  .header__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    color: inherit;
    font-size: var(--text-medium);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .logo__tile {
    display: grid;
    place-items: center;
    width: 1.6em;
    aspect-ratio: 1;
    border-radius: 0.35em;
    background: var(--link);
    color: var(--ink-inverted);
    box-shadow: var(--shadow);
  }

  .footer {
    padding: var(--space-double) var(--space);
    color: var(--ink-dark);
    font-size: var(--text-small);
    text-align: center;
  }

  .panel--centered {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    width: min(100%, 26rem);
    margin: auto;
    padding: var(--space-double) var(--space);
    text-align: center;
  }

  .page {
    width: min(100%, 40rem);
    margin-inline: auto;
    padding: var(--space) var(--space) var(--space-double);
  }

  .title {
    font-size: var(--text-x-large);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .subtitle {
    margin-top: var(--space-half);
    font-size: var(--text-medium);
    text-wrap: balance;
  }

  .hint {
    color: var(--ink-dark);
    font-size: var(--text-small);
    text-wrap: balance;
  }

  .hint strong {
    color: var(--ink);
  }

  .error {
    color: var(--negative);
    font-weight: 600;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space);
  }

  .field {
    display: block;
  }

  .input {
    width: 100%;
    padding: 0.6em 0.9em;
    border: 1px solid var(--ink-medium);
    border-radius: var(--radius);
    background: var(--canvas);
    font-size: max(16px, var(--text-medium));
    transition: border-color 150ms ease, box-shadow 150ms ease;

    &::placeholder {
      color: var(--ink-medium);
    }

    &:focus {
      border-color: var(--link);
      outline: none;
      box-shadow: 0 0 0 3px var(--selected);
    }
  }

  .input--code {
    width: 12ch;
    margin-inline: auto;
    padding-inline: 0.5ch 0;
    font-family: var(--font-mono);
    font-size: var(--text-large);
    font-weight: 900;
    letter-spacing: 0.5ch;
    text-align: center;
    text-transform: uppercase;
  }

  .input--device-code {
    width: 17ch;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.5em 1.2em;
    border: 1px solid var(--ink-light);
    border-radius: 99rem;
    background: var(--canvas);
    font-weight: 600;
    cursor: pointer;
    transition: filter 100ms ease-out, transform 100ms ease-out;

    &:hover {
      filter: brightness(0.94);
    }

    &:active {
      transform: scale(0.98);
    }

    @media (prefers-color-scheme: dark) {
      &:hover {
        filter: brightness(1.2);
      }
    }
  }

  .btn--primary {
    border-color: transparent;
    background: var(--link);
    color: var(--ink-inverted);
    font-size: var(--text-medium);
  }

  .stack .btn--primary {
    align-self: center;
  }

  .btn--small {
    padding: 0.3em 0.9em;
    font-size: var(--text-small);
  }

  .btn--danger {
    color: var(--negative);
  }

  .btn:disabled {
    cursor: default;
    opacity: 0.5;
  }

  .empty {
    padding: var(--space-double) var(--space);
    border: 1px dashed var(--ink-light);
    border-radius: var(--radius);
    color: var(--ink-dark);
    text-align: center;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .shake {
    animation: shake 400ms both;
  }

  .page__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    margin-block: var(--space) var(--space-double);
  }

  .machines {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
  }

  .machine {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-half) var(--space);
    padding: var(--space);
    border-radius: var(--radius);
    background: var(--canvas);
    box-shadow: var(--shadow);
  }

  .machine__name {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .machine__details {
    grid-column: 1;
    color: var(--ink-dark);
    font-size: var(--text-small);
  }

  .machine__address {
    font-family: var(--font-mono);
  }

  .machine form {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.95em;
  }
}

@keyframes shake {
  20% { transform: translateX(-1.5rem); }
  40% { transform: translateX(1.5rem); }
  60% { transform: translateX(-0.75rem); }
  80% { transform: translateX(0.75rem); }
}