/* screen layout */

#sagui {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-md);
  position: relative;
}

#sagui > .window {
  width: min(720px, 100%);
}

/* wordmark */

.wordmark__logo {
  font-family: var(--font-condensed);
  font-size: 1.75rem;
  color: var(--purple);
  letter-spacing: 0.05em;
}

.wordmark__logo:hover {
  color: var(--yellow);
}

/* focus mode is the default: chrome is always dimmed and brightens on
   hover/focus-within. Nothing changes when a run starts, so typing the
   first char causes no transition and no layout shift. */

#sagui :is(.wordmark, .config, .stats, .footer-hint) {
  opacity: 0.45;
  transition: opacity 200ms ease;
}

#sagui :is(.wordmark, .config, .stats, .footer-hint):is(:hover, :focus-within) {
  opacity: 1;
}

/* config pills */

.config {
  display: flex;
  gap: var(--space-lg);
}

.config__group {
  display: flex;
  gap: var(--space-sm);
}

.pill {
  font-family: var(--font-condensed);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: 0;
  padding: var(--space-xs) var(--space-md);
}

.pill:hover {
  color: var(--fg);
}

.pill--active {
  color: var(--yellow);
  border-color: var(--purple);
}

/* stats strip */

.stats {
  display: flex;
  gap: var(--space-xl);
}

.stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.stat__label {
  font-family: var(--font-condensed);
  color: var(--fg-dim);
}

.stat__value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--yellow);
}

/* janelas window */

.window {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 0;
}

.window__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-title);
  border-bottom: 1px solid var(--line);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-condensed);
  color: var(--fg-dim);
}

.window__dot {
  width: 10px;
  height: 10px;
  background: var(--purple);
}

/* the dot doubles as a close button in the about modal */
button.window__dot:hover {
  background: var(--error);
}

.window__body {
  padding: var(--space-md) 0;
}

/* code viewport and char states */

#code-viewport {
  cursor: text;
  overflow-x: auto;
}

.code {
  font-family: var(--font-mono);
  text-transform: none;
  line-height: 1.6;
  font-size: 1.05rem;
}

.line {
  display: block;
  white-space: pre;
}

.gutter {
  display: inline-block;
  width: 3ch;
  margin-right: 2ch;
  color: var(--gutter);
  user-select: none;
  text-align: right;
}

.char--pending {
  color: color-mix(in srgb, var(--syn-default) var(--pending-opacity), transparent);
}

.char--pending[data-role="keyword"] {
  color: color-mix(in srgb, var(--syn-keyword) var(--pending-opacity), transparent);
}

.char--pending[data-role="function"] {
  color: color-mix(in srgb, var(--syn-function) var(--pending-opacity), transparent);
}

.char--pending[data-role="string"] {
  color: color-mix(in srgb, var(--syn-string) var(--pending-opacity), transparent);
}

.char--pending[data-role="constant"] {
  color: color-mix(in srgb, var(--syn-constant) var(--pending-opacity), transparent);
}

.char--pending[data-role="comment"] {
  color: color-mix(in srgb, var(--syn-comment) var(--pending-opacity), transparent);
}

.char--pending[data-role="tag"] {
  color: color-mix(in srgb, var(--syn-tag) var(--pending-opacity), transparent);
}

.char--pending[data-role="attribute"] {
  color: color-mix(in srgb, var(--syn-attribute) var(--pending-opacity), transparent);
}

.char--correct {
  color: var(--fg);
}

.char--correct[data-role="keyword"] { color: var(--syn-keyword); }
.char--correct[data-role="function"] { color: var(--syn-function); }
.char--correct[data-role="string"] { color: var(--syn-string); }
.char--correct[data-role="constant"] { color: var(--syn-constant); }
.char--correct[data-role="comment"] { color: var(--syn-comment); }
.char--correct[data-role="tag"] { color: var(--syn-tag); }
.char--correct[data-role="attribute"] { color: var(--syn-attribute); }

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

.char--error.char--ws {
  background: color-mix(in srgb, var(--error) 30%, transparent);
  text-decoration: underline;
  text-decoration-color: var(--error);
}

/* must out-specify the data-role rules above so the caret char stays
   readable on the caret background. Blink swaps the block, never the
   glyph: animating opacity hid the char half the cycle */
.char.char--caret {
  background: var(--caret);
  color: var(--bg);
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 100% { background-color: var(--caret); color: var(--bg); }
  50% { background-color: transparent; color: inherit; }
}

/* hidden textarea: a dumb key emitter, never display: none */

.typing-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  resize: none;
  pointer-events: none;
  caret-color: transparent;
}

/* results panel: centered column, wpm + accuracy carry the weight,
   time stays quiet. Text stays selectable; only the button restarts. */

.results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
}

.results__wpm {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.results__wpm-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 3.5rem;
  color: var(--yellow);
}

.results__wpm-label {
  font-family: var(--font-condensed);
  font-size: 1.25rem;
  color: var(--fg-dim);
}

.results__acc {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.results__acc-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--purple);
}

.results__acc-label {
  font-family: var(--font-condensed);
  color: var(--fg-dim);
}

.results__meta {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--fg-dim);
}

.results__next {
  margin-top: var(--space-md);
  font-family: var(--font-condensed);
  color: var(--yellow);
  border: 1px solid var(--purple);
  padding: var(--space-xs) var(--space-md);
}

.results__next:hover {
  background: var(--bg-title);
}

/* toast */

.toast {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-condensed);
  color: var(--error);
  border: 1px solid var(--error);
  background: var(--bg-raised);
  padding: var(--space-xs) var(--space-md);
  animation: toast-fade 2s forwards;
}

@keyframes toast-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* about modal */

.about__backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.about__frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 2 * var(--space-md)));
}

.about__body {
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--fg-dim);
}

/* footer hint */

.footer-hint {
  font-family: var(--font-condensed);
  color: var(--fg-dim);
}

.footer-hint__about {
  text-decoration: underline dotted;
}

.footer-hint__about:hover {
  color: var(--yellow);
}

/* no blink, no fades when the user asks for reduced motion */
@media (prefers-reduced-motion: reduce) {
  #sagui :is(.wordmark, .config, .stats, .footer-hint) {
    transition: none;
  }

  .char.char--caret {
    animation: none;
  }
}