/*
 * Reset, page scaffolding, type ramp and the shared keyframes.
 * Nothing here knows about a specific screen.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The app owns its own scrolling regions; the page itself never scrolls sideways. */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Stops iOS from flashing a grey box on every tap. */
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Visible focus, but only for keyboard users — a pointer tap should not ring. */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- App shell ---------------------------------------------------------- */

.app {
  position: relative;
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--paper);
  /* Room for the tab bar plus the iOS home indicator. */
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
}

/* Only one screen is mounted at a time; the router swaps them. */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-inline: var(--gutter);
  animation: screenIn var(--dur-screen) var(--ease) both;
}

.screen--wide { padding-inline: var(--gutter-wide); }

/* ---- Type ramp ---------------------------------------------------------- */

.wordmark {
  font-family: var(--font-display);
  font-size: var(--size-wordmark);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
}

.screen-title {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
}

.wine-name {
  font-family: var(--font-display);
  font-size: var(--size-wine-name);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--tracking-title);
}

.heading { font-family: var(--font-display); font-size: var(--size-heading); font-weight: 500; }
.subheading { font-family: var(--font-display); font-size: var(--size-subheading); font-weight: 500; }

/* Small uppercase mono label. The workhorse of the design's voice. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--wine { color: var(--wine); }
.eyebrow--sm { font-size: var(--size-eyebrow-sm); }

.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

.body-sm { font-size: var(--size-body-sm); }
.caption { font-size: var(--size-caption); color: var(--text-muted); }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-muted); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Available to assistive tech, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Motion ------------------------------------------------------------- */

@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(140, 47, 70, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(140, 47, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(140, 47, 70, 0); }
}

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

/*
 * Staggered entrance. Elements marked .rise animate in sequence down the page;
 * --i sets their position in the order.
 */
.rise {
  animation: riseIn var(--dur-rise) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.pop { animation: popIn var(--dur-pop) var(--ease) both; }

/* Honour a reduced-motion preference: keep the final state, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}