/* Small pieces shared by the pages inside the system: buttons, labels, big numbers, the SF
   monogram, the "em breve" notice and the placeholders shown while data is on its way.
   Colors only through tokens. */

/* ----- buttons (neutral; touch area of 44px) --------------------------------------------- */

.btn,
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
}

.btn {
  gap: var(--space-2);
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}

.iconbtn {
  width: 2.75rem;
  padding: 0;
  color: var(--color-ink-muted);
}

.btn:hover,
.iconbtn:hover {
  border-color: var(--color-ink-subtle);
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* Main button of a page: neutral (text color as background), never the accent. */
.btn--main {
  padding: 0 var(--space-5);
  border-color: transparent;
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--font-size-body-lg);
  font-weight: 600;
}

/* ----- labels and numbers ---------------------------------------------------------------- */

.eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: var(--line-height-body);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

/* Marks numbers that are only an example (not the owner's real data yet). */
.sample {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-ink-subtle);
  font-size: var(--font-size-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.figure {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-figure);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* The small "R$" before an amount. */
.cur {
  margin-right: 0.22em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-subtle);
}

/* ----- SF monogram (vector built by js/logo.js) ------------------------------------------ */

.monogram {
  display: block;
  height: 100%;
  width: auto;
}

.monogram__s {
  fill: var(--color-ink);
}

.monogram__from {
  stop-color: var(--color-brand-from);
}

.monogram__to {
  stop-color: var(--color-brand-to);
}

/* ----- placeholder of a value that is on its way ------------------------------------------ */
/* Same box as the real text, so nothing moves when the value arrives. It only shows up if the
   wait is long enough to be noticed. */

.ghost {
  border-radius: var(--radius-sm);
  background: currentColor;
  color: inherit;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: ghost-in 240ms ease 260ms forwards;
  user-select: none;
}

@keyframes ghost-in {
  to {
    opacity: 0.12;
  }
}

/* ----- notice: a short line at the bottom that goes away by itself (js/notice.js) --------- */

.notice {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: fit-content;
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-hero-border);
  border-radius: 999px;
  background: var(--color-hero-bg);
  box-shadow: var(--shadow-md);
  color: var(--color-hero-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease,
    visibility 0s linear var(--duration-base);
  pointer-events: none;
}

.notice.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ghost {
    animation-duration: 1ms;
  }

  .notice {
    transition: none;
  }
}

/* Light/dark switch (js/theme.js): the new scheme grows as a circle out of the theme button.
   The browser's own cross-fade is turned off; theme.js drives the circle. The icon of the
   button turns half a revolution with a small spring while the circle opens. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 2;
}

::view-transition-old(root) {
  z-index: 1;
}

.is-scheme-switching *,
.is-scheme-switching *::before,
.is-scheme-switching *::after {
  transition: none !important; /* colors jump inside the circle instead of fading twice */
}

.is-scheme-turning svg {
  animation: scheme-turn 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scheme-turn {
  0% {
    transform: rotate(-180deg) scale(0.4);
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-scheme-turning svg {
    animation: none;
  }
}

/* Highlighted words and figures (the Mineração summary number, the ROAS) wear the gradient of the
   logo's FLOW, left to right, instead of flat cyan. One rule for every highlight of this kind. */
.brand-text {
  background-image: linear-gradient(90deg, var(--color-brand-from), var(--color-brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}