/* One big search field, and nothing competing with it.
   The page's only job is to make the input obvious and inviting to type into:
   wordmark above, suggestions below, everything else quiet. Answers appear
   between the two, in the same register. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #17171a;
  --muted: #6d6f76;
  --line: #e3e3e0;
  --card: #ffffff;
  --field-line: #dcdcd8;
  --accent: #e30613;      /* the one red everyone in Switzerland recognises */
  --accent-fg: #ffffff;
  --skeleton: #eeeeec;
  --sheen: rgba(255, 255, 255, .75);
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .07), 0 14px 40px rgba(0, 0, 0, .13);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101013;
    --fg: #f2f2f0;
    --muted: #9b9da4;
    --line: #27272c;
    --card: #1a1a1f;
    --field-line: #303039;
    --accent: #ff4d5e;
    --accent-fg: #1a0004;
    --skeleton: #24242b;
    --sheen: rgba(255, 255, 255, .07);
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 44px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The field sits at a fixed distance from the top rather than being centred
   on whatever the page currently contains. Centring meant that every arrival
   below it (the recent questions, an answer card, the examples) nudged the
   wordmark and the field upwards as it appeared. Anchoring the top means
   things can appear underneath without anything already on screen moving. */
main {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: min(13vh, 7rem) 1.25rem 4rem;
  display: flex;
  flex-direction: column;
}

/* The heading is a box exactly the width of the settled word (that is what
   the invisible copy inside it is for), centred on the page by its own auto
   margins. The visible word hangs from the right edge of that box.
   "fahrplan" is a few pixels narrower than "fragplan", and the flaps are
   built at yet another width, so something has to give when the word starts
   turning. Anchoring the right edge spends those pixels on the left, at the
   "f", instead of sliding the red "plan" that the eye is actually on. */
.wordmark {
  position: relative;
  width: max-content;
  margin: 0 auto .5rem;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  /* It turns when clicked, so it should not select when clicked. */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.wordmark .sizer { visibility: hidden; }

.wordmark .word {
  position: absolute;
  top: 0;
  right: 0;
  white-space: pre;
}

.wordmark b,
.wordmark .red { color: var(--accent); font-weight: 700; }

/* A split flap: four copies of a letter in one grid cell, each clipped to its
   top or bottom half. Two are the fixed background, two are the leaves that
   fall. The cell is as wide as the wider of the two letters, so the word
   cannot shift while it turns. */
.wordmark .cell {
  display: inline-grid;
  /* One column, exactly as wide as the cell. wordmark.js measures the letter
     the cell will land on and sets that width, so the settled word and the
     turning word have identical metrics and "plan" never shifts sideways.
     A wider letter passing through overflows the cell evenly on both sides. */
  grid-template-columns: 100%;
  /* Shallow enough to read as a leaf turning, deep enough that the leaf's
     projection stays inside its own cell instead of hanging over the line. */
  perspective: 900px;
}

.wordmark .half {
  grid-area: 1 / 1;
  justify-self: center;
  white-space: pre;
  backface-visibility: hidden;
}

.wordmark .top { clip-path: inset(0 0 50% 0); }
.wordmark .bottom { clip-path: inset(50% 0 0 0); }

/* The two moving leaves. Durations are matched by FALL_MS and LAND_MS in
   wordmark.js, which waits for a leaf to land before swapping what is under
   it. The bottom leaf rests edge-on, out of sight, until it is its turn. */
.wordmark .top.leaf { transition: transform 55ms ease-in; }

.wordmark .bottom.leaf {
  transform: rotateX(90deg);
  transition: transform 65ms ease-out;
}

/* The gap between the two flaps, which on a real board cuts straight through
   the letter. Painted last, so it sits over the leaves. */
.wordmark .cell::after {
  content: "";
  grid-area: 1 / 1;
  align-self: center;
  height: 2px;
  background: var(--bg);
}

.tagline {
  margin: 0 0 2.4rem;
  color: var(--muted);
  font-size: clamp(.98rem, 2.4vw, 1.1rem);
  text-align: center;
}

/* ---- the field ---- */

.search {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .5rem .5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: 999px;
  box-shadow: var(--shadow-rest);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.search:hover { box-shadow: var(--shadow-lift); }

.search:focus-within {
  border-color: transparent;
  box-shadow: var(--shadow-lift), 0 0 0 2px var(--accent);
  transform: translateY(-1px);
}

.search .glass { flex: none; color: var(--muted); }

#question {
  flex: 1;
  min-width: 0;
  padding: 1.05rem .85rem;
  font: inherit;
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
  color: var(--fg);
  background: transparent;
  border: 0;
}

#question::placeholder { color: var(--muted); opacity: .75; }
#question:focus { outline: 0; }

.divider[hidden] { display: none; }

.divider {
  flex: none;
  width: 1px;
  height: 1.9rem;
  background: var(--line);
}

/* One slot at the end of the field, holding whichever of the two is useful:
   the microphone when there is nothing to say yet, the cross once there is
   something to clear. */
.icon-btn {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, background .15s;
}

.icon-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.icon-btn[hidden] { display: none; }

/* While listening the button holds the accent and breathes, so it is obvious
   the microphone is live even when the page is not being watched closely. */
.mic.listening {
  color: var(--accent-fg);
  background: var(--accent);
  animation: breathe 1.6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60% { box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--accent) 0%, transparent); }
}

.submit {
  flex: none;
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}

.submit:hover { filter: brightness(1.08); transform: scale(1.04); }
.submit:active { transform: scale(.97); }
.submit[disabled] { cursor: progress; }
.submit[disabled]:hover { filter: none; transform: none; }

.submit .arrow { grid-area: 1 / 1; }

/* The spinner sits on top of the arrow and swaps in while a question is in
   flight, so the control that was pressed is the one that reports progress. */
.submit .spinner {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid color-mix(in srgb, var(--accent-fg) 35%, transparent);
  border-top-color: var(--accent-fg);
  border-radius: 50%;
  opacity: 0;
  animation: spin .7s linear infinite;
}

.search.busy .arrow { opacity: 0; }
.search.busy .spinner { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

/* The field's own focus ring is the pill lighting up (:focus-within above), so
   a second box drawn around the input inside it would only be noise. */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- suggestions ---- */

#suggestions { margin-top: 1.6rem; }
#suggestions[hidden] { display: none; }

.hint {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .85rem;
}

.example {
  padding: .5rem 1rem;
  font: inherit;
  font-size: .88rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.example:hover { border-color: var(--accent); color: var(--accent); }

/* A question you asked before: the pill is the question, with a button on the
   end to drop it from this browser's list. */
.example.recent {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: 0 .45rem 0 0;
}

.recent-text {
  padding: .5rem .35rem .5rem 1rem;
  font: inherit;
  font-size: .88rem;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.forget {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.forget:hover { color: var(--accent-fg); background: var(--accent); }

#recent-block { margin-bottom: 1.1rem; }
#recent-block[hidden] { display: none; }

/* ---- the answer ---- */

#answer { margin-top: 1.75rem; }

.card {
  padding: 1.35rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-rest);
}

.route {
  margin: 0 0 .35rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.when {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: .95rem;
}

.go {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.4rem;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
}

.go:hover { filter: brightness(1.08); }

/* The countdown, on the button that does the thing. A fixed-size badge that
   holds its place whatever is in it (three digits, a cross, or nothing once
   it has been cancelled), so the button is one width throughout. */
.go .tick {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: -.45rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  font-size: .85em;
  font-variant-numeric: tabular-nums;
  transition: background .15s;
}

.go .tick:hover { background: rgba(0, 0, 0, .38); }

.alts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .4rem 0 1rem;
}

.chip {
  padding: .25rem .7rem;
  font-size: .8rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.error { border-color: var(--accent); }

/* ---- the wait ---- */

/* A question goes to a language model, which takes a second or two. The
   skeleton stands where the answer will be, in the same shape, so the page
   does not jump when the real card replaces it. */
.skeleton { pointer-events: none; }

.sk {
  border-radius: 999px;
  background: var(--skeleton);
  background-image: linear-gradient(100deg, transparent 20%, var(--sheen) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: sweep 1.35s ease-in-out infinite;
}

.sk-route { height: 1.35rem; width: 62%; margin-bottom: .7rem; }
.sk-when { height: .95rem; width: 38%; margin-bottom: 1.35rem; }
.sk-go { height: 2.9rem; width: 13rem; }

@keyframes sweep {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sk, .mic.listening, .submit .spinner { animation: none; }
  .sk { background-image: none; }
  .submit .spinner { border-top-color: transparent; }
  .search:focus-within { transform: none; }
}

/* ---- footer ---- */

footer {
  padding: 1.5rem 1.25rem 2rem;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

footer p { max-width: 46rem; margin: 0 auto; }
footer a { color: inherit; }

.langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: .7rem;
}

.lang {
  padding: 0;
  font: inherit;
  font-size: .78rem;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.lang:hover { color: var(--fg); }
.lang.current { color: var(--fg); font-weight: 600; }

/* ---- debug ---- */

.debug {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 1rem;
  font-size: .85rem;
  text-align: left;
}

.debug summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--muted);
}

.debug-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .8rem;
  margin: .8rem 0 0;
}

.debug-facts dt { color: var(--muted); }
.debug-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.debug-label {
  margin: 1rem 0 .3rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.debug-note { margin: .5rem 0 0; color: var(--muted); }
.debug-note a { color: var(--accent); }

.debug pre {
  margin: 0;
  padding: .7rem .8rem;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .6rem;
  font-size: .78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Debug mode is sticky, invisible in the URL, and changes behaviour, so it
   announces itself across the top of the page rather than in a corner. */
.debug-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1.25rem;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: .85rem;
  line-height: 1.45;
}

.debug-banner.rejected { background: var(--muted); }
.debug-banner-text { max-width: 62ch; }
.debug-banner strong { font-weight: 700; }

.debug-banner button {
  flex: none;
  padding: .4rem .9rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: inherit;
  background: rgba(0, 0, 0, .22);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.debug-banner button:hover { background: rgba(0, 0, 0, .38); }

@media (max-width: 30rem) {
  .search { padding-left: 1.1rem; }
  .search .glass { display: none; }
  #question { padding-inline: .3rem; }
}