/* The try page is one full-window terminal, as in a real terminal: no header, no frame and nothing around it (owner, 29 Oct). */
/* web/src/design/tokens.css comes first, so every colour and font is a token, and the landing's own styles stay out of it. */

html,
body.try-page {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-950);
  color: var(--ink-050);
  font-family: var(--font-sans);
}

/* The screen takes the whole window, and its size comes from the window, never from the terminal in it. */
.try__screen {
  position: fixed;
  inset: 0;
  background: var(--ink-950);
}

/* xterm.js draws with a terminal's narrow margin, and the fit addon, which counts that padding, fills the rest with whole cells. */
.try__screen .xterm {
  position: absolute;
  inset: 0;
  padding: 0.5rem 0.75rem;
}

/* The app owns the whole screen and keeps no scrollback, so the terminal shows no scrollbar. */
.try__screen .xterm-viewport {
  overflow-y: hidden !important;
  background: var(--ink-950) !important;
}

.try__screen .xterm-scrollable-element > .scrollbar {
  display: none !important;
}

/* What the page says when the lesson cannot go on: on its own dark ground over the terminal, with one way forward. */
.try__notice {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: color-mix(in srgb, var(--ink-950) 92%, transparent);
  text-align: center;
}

.try__notice[hidden] {
  display: none;
}

.try__notice-text {
  max-width: 32rem;
  color: var(--ink-100);
  font: 400 1.0625rem / 1.6 var(--font-sans);
}

.try__notice-text strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--white);
  font: 600 1.25rem / 1.3 var(--font-display);
}

.try__notice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.try__notice-actions:empty {
  display: none;
}

/* The way forward is a code-style button, as login() is on the landing, dark on the dark ground with the app's teal accent. */
.try__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--teal-400);
  border-radius: 0;
  background: transparent;
  color: var(--teal-400);
  font: 500 0.9375rem / 1 var(--font-mono);
  cursor: pointer;
}

.try__button:hover,
.try__button:focus-visible {
  background: var(--teal-400);
  color: var(--ink-950);
}

.try__button:focus-visible {
  outline: 2px solid var(--teal-200);
  outline-offset: 3px;
}

.try__notice-link {
  color: var(--ink-300);
  font-size: 0.9375rem;
}

.try__notice-link:hover {
  color: var(--white);
}

.try__noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 2rem;
  color: var(--ink-100);
  text-align: center;
}