/* Assessment window pages — shown when a candidate hits a simulation/session
   link outside its invitation window. Layout mirrors the landing page so the
   surrounding chrome (header, footer, body background) feels consistent. */

@layer theme {
  .assessment-window-page {
    .window-state-icon--not-yet {
      color: var(--color-info);
      background: oklch(from var(--color-info) l c h / 0.1);
      border-color: oklch(from var(--color-info) l c h / 0.25);
    }

    .window-state-icon--expired {
      color: var(--text-secondary);
      background: oklch(from var(--glass-tint) l c h / 0.06);
      border-color: oklch(from var(--glass-tint) l c h / 0.18);
    }

    .window-state-body {
      color: var(--text-primary);
    }

    .window-state-hint {
      color: var(--text-secondary);
    }

    .window-time--prominent {
      color: var(--accent-primary);
      font-weight: var(--fw-semibold);
    }

    .action-button--secondary {
      background: oklch(from var(--glass-tint) l c h / 0.05);
      color: var(--text-primary);
      border-color: oklch(from var(--glass-tint) l c h / 0.15);

      &:hover {
        background: oklch(from var(--glass-tint) l c h / 0.1);
      }
    }
  }
}

@layer components {
  .assessment-window-page {
    position: relative;
    max-inline-size: min(720px, 100% - 2rem);
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-lg);
    min-block-size: calc(100dvb - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .window-state {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-md);
    }

    .window-state-icon {
      inline-size: 80px;
      block-size: 80px;
      border-radius: 50%;
      border: 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-block-end: var(--space-sm);
    }

    .window-state-body {
      font-size: var(--fs-large);
      line-height: 1.5;
      max-inline-size: 48ch;
    }

    .window-state-hint {
      font-size: var(--fs-small);
    }

    .window-state-actions {
      margin-block-start: var(--space-lg);
    }

    .window-time--prominent {
      white-space: nowrap;
    }
  }
}