/* Homepage hero and the translator */

.hero {
  /* The same distance below as between the translator and the popular words (`.popular`, home.css). */
  margin: var(--space-6) 0 var(--space-20);
}

.lead {
  margin: 0;
  color: var(--color-text-muted);
}

.translator-form {
  --swap-size: var(--size-control-lg);
  display: grid;
  gap: var(--space-4);
}

.pane {
  min-width: 0;
}

/* Shrinks with the screen on small phones so the three languages stay on one line (and wrap if they still can't). */
.pane-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-lg), 6vw, 1.5rem);
  line-height: var(--leading-tight);
}

.pane-languages strong {
  font-weight: var(--weight-bold);
}

.pane-languages span {
  color: var(--color-text-muted);
}

.pane-languages a {
  color: var(--color-text);
  text-decoration: none;
}

.pane-languages a:hover {
  color: var(--color-accent);
}

.pane-languages a[aria-current='true'] {
  font-weight: var(--weight-bold);
}

.input-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--size-pane);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Focus: the accent ring marks the field clearly (the soft border alone is under 3:1, the owner's choice). */
.input-card:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--border-width) * -1);
}

/* The results: a box like the input card's, the same height side by side, so the two panes read as a pair. */
.pane-target .results-panel {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pane-target .result:first-child {
  padding-top: var(--space-2);
}

.pane-target .result:last-child {
  border-bottom: 0;
}

/* Results appear one after another: each fades in and rises a little, --stagger steps later than the one before
   (set by translator.js, which also fades the old ones out first). */
.entering {
  animation: result-in var(--duration-enter) var(--ease-out) both;
  animation-delay: calc(var(--stagger, 0) * var(--duration-stagger));
}

/* Rise a little and come into focus. Also the server-rendered result rows (results.css) and the suggestions. */
@keyframes result-in {
  from {
    opacity: 0;
    translate: 0 var(--space-2);
    filter: blur(2px);
  }
}

.input-card input {
  flex: 1;
  width: 100%;
  padding: var(--space-5) var(--space-12) var(--space-3) var(--space-5);
  font: inherit;
  font-size: var(--text-xl);
  color: inherit;
  background: none;
  border: 0;
  outline: none;
}

.input-card input::placeholder {
  color: var(--color-text-placeholder);
  font-weight: var(--weight-light);
}

/* The empty results box's "The translation will appear here.", as light as the input's placeholder (two classes: it
   must beat `.results-empty` in results.css, which loads later). */
.results-empty.results-placeholder {
  color: var(--color-text-placeholder);
  font-weight: var(--weight-light);
}

/* The browser's own clear button would duplicate ours. */
.input-card input::-webkit-search-cancel-button {
  display: none;
}

.input-card .clear {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}

/* The clear button shows only while there is text (an empty field shows its placeholder). Hidden with visibility, so
   it also leaves the tab order. */
.input-card:has(input:placeholder-shown) .clear {
  opacity: 0;
  visibility: hidden;
}

.input-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* The keyboard toggle: text and icon in one button, styled like the "How to search?" link beside it. */
.keyboard-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-sm);
  margin-left: auto;
  padding: 0 var(--space-2);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out);
}

.keyboard-toggle:hover,
.keyboard-toggle[aria-expanded='true'] {
  color: var(--color-accent);
}

/* "How to search?": a small link at the bottom left of the input that opens a card under it. */
.search-help summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-control-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-base) var(--ease-out);
}

.search-help summary::-webkit-details-marker {
  display: none;
}

.search-help summary:hover,
.search-help[open] summary {
  color: var(--color-accent);
}

.search-help-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  animation: panel-in var(--duration-base) var(--ease-out);
}

/* The help card fades in and slides down a little into place as it opens. */
@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-1));
  }
}

.search-help-panel ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.search-help-panel p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}

.search-help-panel .search-help-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-help-examples a {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.search-help-examples a:hover {
  text-decoration: underline;
}

.search-help-examples .muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.swap-button {
  display: grid;
  place-items: center;
  justify-self: center;
  width: var(--swap-size);
  height: var(--swap-size);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  transform: rotate(90deg);
}

.swap-button svg {
  transition: rotate var(--duration-base) var(--ease-out);
}

.swap-button:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* A half turn on hover hints at what it does. */
@media (hover: hover) {
  .swap-button:hover svg {
    rotate: 180deg;
  }
}

@media (min-width: 48rem) {
  /* Two halves of the grid: with the gutter between them, each pane spans exactly half the columns (1–4 | 5–8 on a
     tablet, 1–6 | 7–12 on a desktop). The swap button sits at the right end of the source pane's language row,
     which keeps room for it, so both panes start and end on column edges. */
  .translator-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: start;
  }

  .pane-source {
    grid-area: 1 / 1;
  }

  .pane-target {
    grid-area: 1 / 2;
  }

  .swap-button {
    grid-area: 1 / 1;
    justify-self: end;
    margin-top: calc(var(--space-1) * -1);
    transform: none;
  }

  .pane-languages {
    font-size: var(--text-2xl);
  }

  .pane-source .pane-languages {
    padding-right: calc(var(--swap-size) + var(--space-2));
  }
}