/* sxv.si — the page's own layout. Every number is a design-system token. */

html,
body {
  margin: 0;
}

.page {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(var(--ds-space-page-24), env(safe-area-inset-top))
    max(var(--ds-space-page-20), env(safe-area-inset-right))
    max(var(--ds-space-page-24), env(safe-area-inset-bottom))
    max(var(--ds-space-page-20), env(safe-area-inset-left));
}

/* ── Clock: flat text on the ground ───────────── */
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sit a little above the middle, where the eye lands. */
.find {
  margin-bottom: 12dvh;
}

.clock p {
  margin: 0;
}

.clock .date {
  color: var(--ds-ink-caption);
}

.clock .time {
  margin-top: var(--ds-space-in-4);
}

/* ── Search: the hero ───────────── */
.find {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-group-12);
  margin-top: var(--ds-space-section-24);
}

.find .ds-search {
  align-self: stretch;
}

.engines {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

/* The clear button shows only when there is text (bundle.css sets it to grid). */
.ds-search > button[hidden] {
  display: none;
}

/* The page puts the cursor in the search field itself on load; the caret is
   the focus mark there, so the 2px ring would sit on the field from the first
   frame. Every other control keeps the system's ring. */
.find .ds-field:focus-visible {
  outline: none;
}

/* While the lens is in the hand, lens.js sets its width every frame; a width
   transition would only make it trail the finger. */
.ds-lens-slide.ds-dragging {
  transition: opacity var(--ds-duration) var(--ds-ease);
}