/* pi styles — plain modern CSS. Reference: au's globals.css ("paper terminal").
   Cascade order is declared once, up front, so layers never fight on specificity:
   later layers win regardless of selector strength. Tokens are the single source
   of truth; components read them via var(). */
@layer reset, tokens, base, components;

@layer tokens {
  :root {
    /* primitives — raw palette, named by what they are (paper terminal, from au) */
    --paper: #f5f1e8;
    --sand: #ede9df;
    --ink: #1a1a1a;
    --umber: #251d12;
    --pink: #ff0080;
    --violet: #7928ca;
    --red: #ee0000;

    /* semantic — named by role; components reference only these */
    --color-bg: var(--paper);
    --color-bg-elevated: var(--sand);
    --color-bg-inverted: var(--umber);
    --color-text: var(--ink);
    --color-text-secondary: color-mix(in oklch, var(--ink), var(--paper) 55%);
    --color-border: var(--ink);
    --color-command: var(--pink);
    --color-arg: var(--violet);
    --color-error: var(--red);
    --color-prompt: var(--color-bg-inverted);

    /* type + spacing scale (derive with calc(var(--space) * n)) */
    --font-mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
    --space: 0.25rem;
  }
}

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

  /* :where() = zero specificity, so anything below overrides it effortlessly */
  :where(html, body) {
    height: 100%;
    margin: 0;
  }
}

@layer base {
  body {
    font-family: var(--font-mono);
    color: var(--color-text);
    background: var(--color-bg);
  }
}

@layer components {
  /* public landing (/) — just a login link centered on the bg */
  .landing {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;

    a {
      color: var(--color-command);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* block runner (/block) — au's paper-terminal card: header / console / blocks */
  .app {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 4fr);
    inline-size: calc(100% - 2rem);
    max-inline-size: 480px;
    block-size: calc(100dvh - 2rem);
    margin: 1rem auto;
    overflow: hidden;
    border: 1px dashed var(--color-border);
  }

  .appHeader {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--color-border);

    h1 {
      display: flex;
      flex: 1;
      align-items: center;
      padding-left: 1rem;
      margin: 0;
      font-size: 1.15rem;
      letter-spacing: 0.05em;
      border-right: 1px dashed var(--color-border);

      &::before {
        margin-right: 0.5em;
        content: "⠋";
        animation: spinner 12s steps(1) infinite;
      }
    }
  }

  .userSlot {
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
  }

  .sticker {
    padding: 2px 6px;
    color: var(--color-bg);
    background: var(--color-bg-inverted);
  }

  .userSlot button {
    font: inherit;
    color: var(--color-text);
    text-transform: uppercase;
    cursor: pointer;
    background: none;
    border: none;
  }

  /* append-only console (the run display) */
  .console {
    padding: 0.5rem 1rem;
    overflow-y: auto;
    overflow-wrap: anywhere;
    border-bottom: 1px dashed var(--color-border);

    .entry {
      margin-bottom: 2px;
    }

    .prompt {
      font-weight: 700;
      color: var(--color-prompt);
    }

    .command {
      font-weight: 700;
      color: var(--color-command);
    }

    .result,
    .error {
      padding-left: 1rem;
      margin: 0;
    }

    .error {
      color: var(--color-error);
    }
  }

  /* block buttons — a dotted pegboard grid, empty cells are holes */
  .blocks {
    display: grid;
    grid-template-columns: repeat(4, 4rem);
    grid-auto-rows: 4rem;
    place-content: center;
  }

  .block {
    display: grid;
    place-items: center;
    font: 700 1.25rem var(--font-mono);
    color: var(--color-text);
    text-transform: uppercase;
    cursor: grab;
    background-color: var(--color-bg-elevated);
    background-image: radial-gradient(
      color-mix(in oklch, var(--umber), transparent 60%) 1px,
      transparent 1.2px
    );
    background-size: 4px 4px;
    border: none;
  }

  .hole {
    display: grid;
    place-items: center;
  }

  .dot {
    inline-size: 8px;
    block-size: 8px;
    border: 1px solid var(--color-text-secondary);
  }

  @keyframes spinner {
    0% {
      content: "⠋";
    }
    10% {
      content: "⠙";
    }
    20% {
      content: "⠹";
    }
    30% {
      content: "⠸";
    }
    40% {
      content: "⠼";
    }
    50% {
      content: "⠴";
    }
    60% {
      content: "⠦";
    }
    70% {
      content: "⠧";
    }
    80% {
      content: "⠇";
    }
    90% {
      content: "⠏";
    }
  }
}