@layer reset, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body, h1, h2, p, dl, dd { margin: 0; }
  button, input { font: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    --paper: oklch(0.972 0.012 74);
    --paper-deep: oklch(0.935 0.018 70);
    --ink: oklch(0.245 0.018 54);
    --ink-soft: oklch(0.34 0.02 54);
    --muted: oklch(0.515 0.022 58);
    --line: oklch(0.825 0.025 67);
    --accent: oklch(0.49 0.17 35);
    --accent-hover: oklch(0.43 0.16 35);
    --accent-soft: oklch(0.91 0.052 48);
    --light-ink: oklch(0.965 0.01 72);
    --light-muted: oklch(0.79 0.02 70);
    --success: oklch(0.48 0.105 145);
    --danger: oklch(0.5 0.17 27);
    --focus: oklch(0.65 0.17 35);
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    color: var(--ink);
    background: var(--paper);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  ::selection { color: var(--ink); background: var(--accent-soft); }
}

@layer layout {
  .topbar {
    position: relative;
    z-index: 2;
    min-height: 4.5rem;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--light-ink);
    background: var(--ink);
    border-bottom: 1px solid oklch(0.39 0.02 54);
  }

  .shell {
    min-height: calc(100vh - 4.5rem);
    display: grid;
    grid-template-columns: minmax(22rem, 0.86fr) minmax(28rem, 1.14fr);
  }

  .context {
    min-height: calc(100vh - 4.5rem);
    padding: clamp(3rem, 7vh, 6rem) clamp(2rem, 5vw, 5.5rem) 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    color: var(--light-ink);
    background: var(--ink);
  }

  .auth-zone {
    width: min(100%, 35rem);
    min-height: calc(100vh - 4.5rem);
    margin-inline: auto;
    padding: clamp(3rem, 7vh, 6rem) clamp(1.5rem, 5vw, 4.5rem) 2rem;
    display: flex;
    flex-direction: column;
  }

  .auth-footer {
    margin-top: auto;
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
  }

  @media (max-width: 820px) {
    .topbar { padding-inline: 1.25rem; }
    .shell { display: block; }
    .context {
      min-height: auto;
      padding: 3.5rem 1.5rem 2.25rem;
      gap: 2.75rem;
    }
    .auth-zone { min-height: 44rem; padding: 2.75rem 1.5rem 1.5rem; }
    .context-note { display: none; }
  }

  @media (max-width: 430px) {
    .environment { font-size: 0.7rem; }
    .context { padding-top: 2.75rem; }
    .proof-list { gap: 0; }
    .auth-zone { padding-inline: 1.15rem; }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 10;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 0.9rem;
    color: var(--light-ink);
    background: var(--accent);
    transform: translateY(-160%);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .skip-link:focus { transform: translateY(0); }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 720;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  .brand-mark {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--light-ink);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 850;
  }
  .environment {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--light-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .environment > span {
    width: 0.45rem;
    height: 0.45rem;
    background: oklch(0.72 0.13 145);
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem oklch(0.72 0.13 145 / 0.14);
  }

  .eyebrow, .section-kicker {
    color: var(--accent-soft);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.15em;
  }
  .eyebrow { margin-bottom: 1.15rem; }
  h1 {
    max-width: 9ch;
    font-size: clamp(2.9rem, 5.4vw, 5.4rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
    font-weight: 790;
  }
  .intro {
    max-width: 34rem;
    margin-top: 1.75rem;
    color: var(--light-muted);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.65;
  }

  .proof-list { display: grid; }
  .proof-item {
    min-height: 4.7rem;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.85rem;
    align-items: start;
    border-top: 1px solid oklch(0.4 0.02 54);
  }
  .proof-item:last-child { border-bottom: 1px solid oklch(0.4 0.02 54); }
  .proof-index { color: var(--accent-soft); font: 700 0.68rem/1.6 ui-monospace, monospace; }
  .proof-item div { display: grid; gap: 0.15rem; }
  .proof-item strong { font-size: 0.92rem; font-weight: 680; }
  .proof-item div span { color: var(--light-muted); font-size: 0.78rem; }
  .context-note { color: var(--light-muted); font: 600 0.7rem/1.4 ui-monospace, monospace; letter-spacing: 0.04em; }

  .session-check {
    min-height: 9rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--muted);
    font-size: 0.88rem;
  }
  .check-line {
    width: 2.5rem;
    height: 0.18rem;
    overflow: hidden;
    background: var(--line);
    border-radius: 1rem;
  }
  .check-line::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: var(--accent);
    animation: verify 1s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
  }
  @keyframes verify { from { transform: translateX(0); } to { transform: translateX(125%); } }

  .tabs {
    display: flex;
    gap: 1.75rem;
    margin-bottom: 3.25rem;
    border-bottom: 1px solid var(--line);
  }
  .tabs button {
    position: relative;
    padding: 0 0 0.8rem;
    color: var(--muted);
    background: transparent;
    border: 0;
    font-size: 0.86rem;
    font-weight: 700;
  }
  .tabs button[aria-selected="true"] { color: var(--ink); }
  .tabs button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--accent);
  }

  .form-heading { margin-bottom: 2.35rem; }
  .section-kicker { margin-bottom: 0.55rem; color: var(--accent); }
  h2 { font-size: 1.9rem; line-height: 1.14; letter-spacing: -0.035em; font-weight: 760; }
  .form-heading > p:last-child, .session-view > p:not(.section-kicker):not(.form-message) {
    max-width: 32rem;
    margin-top: 0.85rem;
    color: var(--muted);
    font-size: 0.91rem;
  }

  form { display: grid; gap: 1.25rem; }
  .field { display: grid; gap: 0.45rem; }
  label { font-size: 0.82rem; font-weight: 690; }
  input {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.75rem 0.9rem;
    color: var(--ink);
    background: oklch(0.985 0.008 74);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    caret-color: var(--accent);
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  input:hover { border-color: oklch(0.7 0.035 60); }
  input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.22rem oklch(0.49 0.17 35 / 0.12); outline: 0; }
  input[aria-invalid="true"] { border-color: var(--danger); }
  input::placeholder { color: oklch(0.64 0.02 58); }
  .password-field { position: relative; }
  .password-field input { padding-right: 5.25rem; }
  .reveal {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    padding: 0.35rem 0.25rem;
    color: var(--muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
    font-size: 0.74rem;
    font-weight: 720;
  }
  .reveal:hover { color: var(--ink); }
  .field-hint { color: var(--muted); font-size: 0.72rem; }

  .form-message { min-height: 1.35rem; color: var(--danger); font-size: 0.8rem; }
  .form-message[data-kind="success"] { color: var(--success); }

  .primary-action, .secondary-action {
    min-height: 3.2rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    font-weight: 740;
    transition: background-color 170ms cubic-bezier(0.22, 1, 0.36, 1), transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .primary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--light-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
  }
  .primary-action:hover { background: var(--accent-hover); }
  .primary-action:active, .secondary-action:active { transform: translateY(1px); }
  button:disabled { cursor: wait; opacity: 0.62; }

  .session-view { padding-top: 3.5rem; }
  .success-mark {
    width: 3rem;
    height: 3rem;
    margin-bottom: 2rem;
    display: grid;
    place-items: center;
    color: var(--paper);
    background: var(--success);
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
  }
  .session-data { margin: 2.5rem 0 1.75rem; border-top: 1px solid var(--line); }
  .session-data div {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .session-data dt { color: var(--muted); font-size: 0.78rem; }
  .session-data dd { font: 700 0.8rem/1.4 ui-monospace, monospace; }
  .status-dot { display: inline-block; width: 0.48rem; height: 0.48rem; margin-right: 0.25rem; background: var(--success); border-radius: 50%; }
  .secondary-action { width: 100%; color: var(--ink); background: transparent; border: 1px solid var(--line); }
  .secondary-action:hover { background: var(--paper-deep); border-color: oklch(0.7 0.035 60); }

  @media (max-width: 430px) {
    .proof-item:nth-child(3) { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}