/* 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;
}

/* On a phone the language tabs are a segmented control across the pane's full width: pills on a tinted rail, the
   current one filled, no "|" separators (three names at heading size wrapped onto two lines). It scrolls sideways
   rather than wrapping, should three long names still not fit. From 48rem it goes back to a row of large text
   tabs. */
.pane-languages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: var(--space-1);
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  border-radius: var(--radius-pill);
  overflow-x: auto;
  /* Shrinks a step on the narrowest phones so three names still fit without scrolling. */
  font-size: clamp(var(--text-sm), 4.4vw, var(--text-base));
  line-height: var(--leading-tight);
  scrollbar-width: none;
}

.pane-languages::-webkit-scrollbar {
  display: none;
}

/* A Georgian or English search has a single result language, which the empty results box already names, so the
   target row has nothing to choose and is dropped. On a desktop the two panes still start level: the row's height
   comes from the source pane through the subgrid, and the results panel is placed on the card row by hand. */
.pane-target .pane-languages:not(:has(a:not([hidden]))) {
  display: none;
}

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

/* The separators belong to the text tabs; the segmented control has the rail instead. */
.pane-languages span {
  display: none;
  color: var(--color-text-muted);
}

/* The pills share the row: equal widths, and the rail scrolls only if even their text can't be squeezed in. */
.pane-languages a {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-md);
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-decoration: none;
}

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

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

.pane-languages a[aria-current='true']:hover {
  color: var(--color-on-accent);
}

.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 ("The Georgian 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), so both panes start and end on column edges. The form's rows are the
     language tabs, the cards and the keyboard; each pane is a subgrid of those three, so the two language rows and the
     two cards start on the same line whatever either side holds. */
  .translator-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* The last row takes whatever the results overflow into, so the card row stays the height of the input card. */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--grid-gutter);
    /* The rows carry their own spacing (the language row's margin, the keyboard's). */
    row-gap: 0;
    align-items: start;
  }

  .pane {
    display: grid;
    grid-row: 1 / 4;
    grid-template-rows: subgrid;
    /* The form's `align-items` doesn't reach into a subgrid: without this the input card would stretch to the height
       of a full page of results. */
    align-items: start;
  }

  .pane-source {
    grid-column: 1;
  }

  .pane-target {
    grid-column: 2;
  }

  /* The results panel runs from the card row into the keyboard's (a `1fr` row, which takes all of the overflow), so
     a long page of results doesn't make the card row taller: the keyboard still opens directly under the input and
     the swap button stays level with the input card. */
  .pane-target .results-panel {
    grid-row: 2 / 4;
  }

  /* The swap button sits on the gutter between the two cards, half of it over each, level with the middle of the
     input card (`--size-pane`, its fixed minimum — so it stays put however long the results are). A chip of its own:
     the surface and hairline keep it legible where it overlaps the cards, and it paints above the results panel,
     which comes after it in the markup. */
  .swap-button {
    grid-area: 2 / 1 / 3 / 3;
    z-index: 1;
    justify-self: center;
    align-self: start;
    margin-top: calc((var(--size-pane) - var(--swap-size)) / 2);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transform: none;
  }

  /* The tint goes over the chip's surface here, not over the page. */
  .swap-button:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  }

  /* Back to a row of large text tabs: no rail, no pills, the "|" separators again, and the lone მეგრული of a
     Georgian or English search is shown (there is room for it here). */
  .pane-languages {
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    padding: 0;
    background: none;
    border-radius: 0;
    overflow-x: visible;
    font-size: var(--text-2xl);
  }

  .pane-languages span {
    display: inline;
  }

  .pane-languages a {
    display: inline;
    flex: 0 1 auto;
    min-height: 0;
    padding: 0;
    color: var(--color-text);
    border-radius: 0;
  }

  .pane-languages a[aria-current='true'] {
    color: var(--color-text);
    background: none;
  }

  .pane-languages a:hover,
  .pane-languages a[aria-current='true']:hover {
    color: var(--color-accent);
  }

  /* The target languages sit against the pane's right edge, where the results are read from. */
  .pane-target .pane-languages {
    justify-content: flex-end;
  }
}