/* SeinovFlow: the frame (side menu, top, drawer, quick list, profile menu, "em breve") and the
   Início (js/seinovflow.js, js/seinovflow/inicio.js). Model approved on 11/11 ("Inicio do
   SeinovFlow - escuro (computador)"): measures taken from it at 1470 px wide.
   The whole area uses the Inter Tight (bundled; the approved picture uses weight 500 for text).
   Colors only through tokens. The chart (css/chart.css) and the map (css/map.css) style
   themselves; here only their cards. */

/* ===== frame ================================================================================ */

.sf {
  --sf-side-w: 236px;
  --sf-gutter: 1rem;
  --sf-gap: 1rem;
  --sf-radius-ctl: 10px;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-display);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: var(--line-height-body);
}

:where(.sf) ul,
:where(.sf) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf button {
  font-family: inherit;
}

html.sf-locked,
html.sf-locked body {
  overflow: hidden;
}

/* ----- side menu (drawer on narrow screens) ----------------------------------------------- */

.sf-side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(18.5rem, 86vw);
  padding: 0 12px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--duration-base) ease, visibility 0s linear var(--duration-base);
}

.sf-side.is-open {
  transform: none;
  visibility: visible;
  box-shadow: var(--shadow-md);
  transition-delay: 0s;
}

.sf-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--color-scrim);
}

.sf-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: max(16px, env(safe-area-inset-top, 0px));
}

.sf-side__logo {
  display: block;
  width: 190px;
  margin-left: 12px;
  border-radius: var(--radius-sm);
}

/* SEINOV letters of the logo follow the text color (white on dark, ink on light); FLOW keeps
   the brand gradient. */
.sf-side .logo__ink {
  fill: var(--color-ink);
}

.sf-nav__group {
  margin: 19px 0 6px 12px;
  font-size: var(--font-size-2xs);
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.sf-nav__group:first-child {
  margin-top: 28px;
}

.sf-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-bottom: 2px;
  padding: 0 12px 0 11px;
  border-radius: var(--sf-radius-ctl);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.sf-nav__item .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-nav__item:hover {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.sf-nav__item[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* Tab change, "Traço elástico" (js/seinovflow.js, createStroke): the item background
   cross-fades in 240 ms and the cyan stroke leaves the item for its own element, which stretches
   from item to item (front end first, back end after). Only transform moves it. */
.sf-nav--stroke {
  position: relative;
}

.sf-nav--stroke .sf-nav__item {
  transition:
    background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
    color var(--duration-fast) ease;
}

/* On the light menu the white item gets a hairline lift so it does not melt into it. */
.sf-nav--stroke .sf-nav__item[aria-current="page"] {
  box-shadow: 0 1px 2px light-dark(color-mix(in srgb, var(--color-ink) 12%, transparent), transparent);
}

.sf-nav__stroke {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--sf-radius-ctl);
  height: 0;
  pointer-events: none;
}

.sf-nav__stroke[hidden] {
  display: none;
}

.sf-nav__cap,
.sf-nav__line {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  will-change: transform;
}

/* The caps repeat the curve of the item corner; the line in between is straight, 1 px tall and
   stretched with scaleY, so nothing curved is ever deformed. */
.sf-nav__cap {
  width: var(--sf-radius-ctl);
  height: var(--sf-radius-ctl);
  border-left: 2px solid var(--color-accent);
}

.sf-nav__cap--top {
  border-top-left-radius: var(--sf-radius-ctl);
}

.sf-nav__cap--bottom {
  border-bottom-left-radius: var(--sf-radius-ctl);
}

.sf-nav__line {
  width: 2px;
  height: 1px;
  background: var(--color-accent);
  transform-origin: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .sf-nav--stroke .sf-nav__item {
    transition: none;
  }
}

.sf-nav__count {
  margin-left: auto;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* ----- top -------------------------------------------------------------------------------- */

.sf-body {
  min-width: 0;
}

.sf-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: max(8px, env(safe-area-inset-top, 0px)) var(--sf-gutter) 8px;
  background: var(--color-bg);
}

.sf-top__title {
  flex: 1;
  min-width: 0;
  margin: 0 var(--space-1);
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-top__tools {
  flex-basis: 100%;
  order: 10;
  margin-top: 4px;
}

/* Square icon button of the frame (44 px on touch screens, 36 px on computers). */
.sf-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--sf-radius-ctl);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.sf-icon:hover {
  border-color: var(--color-ink-subtle);
  color: var(--color-ink);
}

.sf-icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-top__menu {
  border-color: transparent;
}

.sf-side__close {
  border-color: transparent;
}

.sf-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-warning);
  color: var(--color-bg);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  line-height: 1;
}

/* Search: an icon on phones, the field with the shortcut from 700 px. */
.sf-find {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--sf-radius-ctl);
  background: var(--color-surface-alt);
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
}

.sf-find:hover {
  border-color: var(--color-ink-subtle);
}

.sf-find .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-find__text,
.sf-find .sf-kbd {
  display: none;
}

.sf-kbd {
  display: inline-grid;
  place-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: 500 var(--font-size-2xs) / 1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

/* Periods: one segmented control. */
.sf-periods {
  display: flex;
  height: 50px; /* buttons of 44 px on touch screens */
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--sf-radius-ctl);
  background: var(--color-surface-alt);
}

.sf-periods__btn {
  flex: 1;
  min-width: 0;
  padding: 0 0 1px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.sf-periods__btn:hover {
  color: var(--color-ink);
}

.sf-periods__btn[aria-pressed="true"] {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Elastic pill (inicio.js, periodPill): one indicator behind the buttons. On a change the
   leading edge runs first and the trailing edge follows a little later (more for a longer jump),
   so the pill stretches toward the new button and settles on it. Without the script the pressed
   button keeps its own background (rule above). */
.sf-periods.has-pill {
  position: relative;
  isolation: isolate;
  --sf-pill-lead: 230ms;
  --sf-pill-trail: 240ms;
  --sf-pill-lag: 60ms; /* set by the script from the size of the jump */
  --sf-pill-ease-lead: cubic-bezier(0.3, 0, 0.15, 1);
  --sf-pill-ease-trail: cubic-bezier(0.55, 0, 0.25, 1.18);
}

.sf-periods__pill {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent);
  pointer-events: none;
}

.sf-periods__pill[data-instant] {
  transition: none !important;
}

.sf-periods__pill[data-dir="right"] {
  transition:
    right var(--sf-pill-lead) var(--sf-pill-ease-lead),
    left var(--sf-pill-trail) var(--sf-pill-ease-trail) var(--sf-pill-lag);
}

.sf-periods__pill[data-dir="left"] {
  transition:
    left var(--sf-pill-lead) var(--sf-pill-ease-lead),
    right var(--sf-pill-trail) var(--sf-pill-ease-trail) var(--sf-pill-lag);
}

.sf-periods.has-pill .sf-periods__btn {
  position: relative;
  z-index: 1;
  transition: color 160ms ease;
}

.sf-periods.has-pill .sf-periods__btn[aria-pressed="true"] {
  border-color: transparent;
  background: none;
  transition-delay: calc(var(--sf-pill-lead) * 0.35); /* the text lights up as the pill arrives */
}

@media (prefers-reduced-motion: reduce) {
  .sf-periods__pill[data-dir],
  .sf-periods.has-pill .sf-periods__btn,
  .sf-periods.has-pill .sf-periods__btn[aria-pressed="true"] {
    transition: none;
  }
}

/* ----- profile menu ----------------------------------------------------------------------- */

.sf-profile {
  position: relative;
}

.sf-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 13rem;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.sf-menu__name {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.sf-menu__item .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-menu__item:hover,
.sf-menu__item:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.sf-menu__item[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* ----- quick list (⌘K) -------------------------------------------------------------------- */

.sf-palette {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.sf-palette__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.sf-palette__box {
  position: relative;
  width: min(35rem, calc(100% - 2rem));
  max-height: min(30rem, calc(100dvh - 6rem));
  margin: max(4rem, 12vh) auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.sf-palette__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-subtle);
}

.sf-palette__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-size: var(--font-size-md); /* 16 px: phones do not zoom */
  outline: none;
}

.sf-palette__input::placeholder {
  color: var(--color-ink-subtle);
}

.sf-palette__list {
  overflow-y: auto;
  padding: 6px;
}

.sf-palette__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.sf-palette__item .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-palette__item[aria-selected="true"] {
  background: var(--color-surface-alt);
  color: var(--color-ink);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.sf-palette__label {
  flex: 1;
}

.sf-palette__hint {
  color: var(--color-ink-subtle);
  font-size: var(--font-size-xs);
}

.sf-palette__empty:empty {
  display: none;
}

.sf-palette__empty {
  padding: 4px 16px 16px;
  color: var(--color-ink-subtle);
}

/* ----- content ---------------------------------------------------------------------------- */

.sf-main {
  padding: 4px var(--sf-gutter) max(32px, env(safe-area-inset-bottom, 0px));
}

.sf-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.sf-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 20px;
  padding-top: 9px;
  border-bottom: 1px solid var(--color-border);
}

.sf-card__head .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sf-card__head h2 {
  margin-right: auto;
  font-weight: 600;
  font-size: var(--font-size-body-lg);
  letter-spacing: 0;
  white-space: nowrap;
}

.sf-card__head p {
  min-width: 0;
  color: var(--color-ink-subtle);
  text-align: right;
}

.sf-card__head--plain {
  border-bottom-color: transparent;
}

/* "em breve" screen of a tab that does not exist yet. */
.sf-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-14) var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
}

.sf-soon__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

.sf-soon__flag {
  font-size: var(--font-size-2xs);
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.sf-soon__title {
  font-weight: 600;
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-tight);
}

.sf-soon__text {
  max-width: 30rem;
  margin-bottom: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.sf-soon__back .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ----- Configurações › Mineração: connect the Mac ------------------------------------------ */

.sfc {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.sfc-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}

.sfc-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 3rem; /* the place of the two lines, kept while the state arrives */
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.sfc-state__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--color-ink-subtle);
}

.sfc-state[data-state="on"] .sfc-state__dot {
  border-color: var(--color-positive);
  background: var(--color-positive);
}

.sfc-state[data-state="off"] .sfc-state__dot {
  border-color: var(--color-warning);
  background: var(--color-warning);
}

.sfc-state__title {
  font-weight: 600;
  font-size: var(--font-size-body-lg);
}

.sfc-state__text {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.sfc-state__text:empty {
  display: none;
}

.sfc-form {
  display: grid;
  gap: var(--space-2);
}

.sfc-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.sfc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sfc-input {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
  height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-size: var(--font-size-lg); /* 20 px: big digits, and phones do not zoom in */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.sfc-input::placeholder {
  color: var(--color-ink-subtle);
  opacity: 0.6;
}

.sfc-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.sfc-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.sfc-go {
  flex: none;
}

.sfc-help {
  color: var(--color-ink-subtle);
  font-size: var(--font-size-caption);
}

.sfc-error {
  min-height: 1.25rem; /* kept, so the page does not jump when a message comes */
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.sfc-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.sfc-done .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-positive);
}

.sfc-done a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sfc-done a .icon {
  color: inherit;
  transform: rotate(-45deg);
}

/* ----- Configurações › Sessões: leave the other devices ------------------------------------ */

.sfc-body--tight {
  gap: var(--space-3);
}

.sfc-note {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.sfc-out {
  min-width: 14rem; /* "Confirmar?" takes the same place: nothing moves */
}

.sfc-out.is-armed {
  border-color: var(--color-ink);
  font-weight: 600;
}

.sfc-out[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

.sfc-said {
  min-height: 1.25rem; /* kept, so the page does not jump when the answer comes */
  font-size: var(--font-size-sm);
}

.sfc-said__done {
  color: var(--color-ink);
  font-weight: 500;
}

.sfc-said__error {
  color: var(--color-danger);
}

.sfc-more {
  color: var(--color-ink-subtle);
  font-size: var(--font-size-caption);
}

/* ----- larger screens --------------------------------------------------------------------- */

@media (min-width: 700px) {
  .sf {
    --sf-gutter: 1.5rem;
  }

  .sf-find {
    display: flex;
    gap: 8px;
    width: 219px;
    padding: 0 13px 0 11px;
    text-align: left;
  }

  .sf-find__text {
    display: block;
    flex: 1;
  }

  .sf-find .sf-kbd {
    display: inline-grid;
  }
}

@media (min-width: 900px) {
  .sf-top {
    flex-wrap: nowrap;
    gap: 12px;
    height: 72px;
    padding: 20px var(--sf-gutter) 16px;
  }

  .sf-top__title {
    margin: 0 auto 0 0;
    font-size: 1.625rem;
    line-height: 1;
  }

  .sf-top__menu + .sf-top__title {
    margin-left: -4px;
  }

  .sf-top__tools {
    flex-basis: auto;
    order: 0;
    margin: 0 1px 0 0;
  }

  .sf-periods {
    width: 299px;
    height: 36px;
    padding: 3px;
  }

  .sf-icon,
  .sf-find {
    height: 36px;
  }

  .sf-icon {
    width: 36px;
  }

  .sf-menu__item {
    height: 38px;
  }

  .sf-main {
    padding-top: 0;
  }
}

/* Fixed side menu, as in the approved picture. */
@media (min-width: 1100px) {
  .sf {
    --sf-gutter: 2rem;
    display: grid;
    grid-template-columns: var(--sf-side-w) minmax(0, 1fr);
  }

  .sf-side {
    position: sticky;
    top: 0;
    width: auto;
    height: 100vh;
    height: 100dvh;
    padding-top: 0;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .sf-side__head {
    padding-top: 24px;
  }

  .sf-side__close,
  .sf-top__menu,
  .sf-scrim {
    display: none;
  }

  .sf-nav__group:first-child {
    margin-top: 36px;
  }

  .sf-nav__item {
    height: 36px;
  }

  .sf-top {
    position: static;
  }

  .sf-body {
    max-width: 112rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-side,
  .sf-side.is-open {
    transition: none;
  }
}

/* ===== Início =============================================================================== */

.sfi {
  container: sfi / inline-size;
}

.sfi-board {
  display: flex;
  flex-direction: column;
  gap: var(--sf-gap);
  transition: opacity var(--duration-base) ease;
}

/* A new period on its way: what is on the screen stays, a bit faded. */
.sfi.is-stale .sfi-board {
  opacity: 0.55;
}

.sfi-cur,
.sfi-cents {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-subtle);
}

.sfi-cur {
  margin-right: 0.14em;
  font-size: 0.46em;
}

.sfi-trend {
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.sfi-trend .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 2px;
  vertical-align: -2px;
  stroke-width: 2;
}

.sfi-trend.is-up {
  color: var(--color-positive);
}

.sfi-trend.is-up .icon {
  transform: rotate(-90deg);
}

.sfi-trend.is-down {
  color: var(--color-danger);
}

.sfi-trend.is-down .icon {
  transform: rotate(90deg);
}

.sfi-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.sfi-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--color-ink-subtle);
}

.sfi-none {
  padding: var(--space-5) 0;
  color: var(--color-ink-subtle);
}

/* ----- highlight (phones first: stacked) -------------------------------------------------- */

.sfi-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.sfi-hero__main {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 20px 20px 18px;
}

/* Engraving of banknotes behind the empty side of the revenue, very faint. The picture is only a
   shape (img/notas-gravura.png, the lines of the engraving as transparency): its color comes from
   the theme, and it fades out before reaching the number. */
.sfi-hero__main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-ink) 7%, transparent);
  -webkit-mask-image: url("/static/img/notas-gravura.png"), linear-gradient(to right, transparent 30%, var(--color-ink) 80%);
  mask-image: url("/static/img/notas-gravura.png"), linear-gradient(to right, transparent 30%, var(--color-ink) 80%);
  -webkit-mask-size: cover, 100% 100%;
  mask-size: cover, 100% 100%;
  -webkit-mask-position: right center, 0 0;
  mask-position: right center, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.sfi-greet {
  font-size: var(--font-size-sm);
  line-height: 22px;
  color: var(--color-ink-muted);
}

.sfi-greet__hello {
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

.sfi-hero__labelrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 15px;
}

.sfi-eyebrow {
  font-size: var(--font-size-2xs);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.sfi-sample {
  height: 1.125rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}

.sfi-figure {
  margin-top: 6px;
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sfi-figure .sfi-cur {
  margin-right: 0.03em;
  font-size: 0.42em;
}

.sfi-figure .sfi-cents {
  font-size: 0.47em;
}

.sfi-cmp {
  margin-top: 8px;
  line-height: 20px;
  color: var(--color-ink-muted);
}

.sfi-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.sfi-stat {
  min-width: 0;
  padding: 14px 4px 14px 20px;
}

.sfi-stat:nth-child(even) {
  border-left: 1px solid var(--color-border);
}

.sfi-stat:nth-child(n + 3) {
  border-top: 1px solid var(--color-border);
}

.sfi-stat dt {
  font-size: var(--font-size-caption);
  line-height: 18px;
  color: var(--color-ink-muted);
}

.sfi-stat__v {
  margin-top: 6px;
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sfi-stat__v.is-negative {
  color: var(--color-danger);
}

.sfi-stat__v.is-negative .sfi-cur,
.sfi-stat__v.is-negative .sfi-cents {
  color: inherit;
}


.sfi-stat__s {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-ink-muted);
}

.sfi-chip {
  display: inline-flex;
  align-items: center;
  height: 21px;
  margin-left: 2px;
  padding: 0 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  vertical-align: 1px;
  white-space: nowrap;
}

.sfi-chip.is-bad {
  color: var(--color-danger);
}

/* Goal: the medal (medal.js) beside its text on phones; a column on wider screens. */
.sfi-goal {
  display: flex;
  align-items: center;
  padding: 16px;
  border-top: 1px solid var(--color-border);
}

.sfm {
  /* neutral metal */
  --sfm-hi: light-dark(var(--color-surface), var(--color-ink));
  --sfm-lo: light-dark(color-mix(in srgb, var(--color-ink) 46%, transparent), var(--color-tabbar));
  --sfm-main: light-dark(color-mix(in srgb, var(--color-ink) 62%, var(--color-surface)), color-mix(in srgb, var(--color-ink) 74%, var(--color-surface)));
  --sfm-mold: light-dark(color-mix(in srgb, var(--color-ink-subtle) 20%, transparent), color-mix(in srgb, var(--color-ink-subtle) 24%, transparent));
  --sfm-rim-a: light-dark(var(--color-surface), color-mix(in srgb, var(--color-ink) 62%, var(--color-surface)));
  --sfm-rim-b: light-dark(color-mix(in srgb, var(--color-ink-subtle) 48%, var(--color-surface)), color-mix(in srgb, var(--color-ink-subtle) 42%, var(--color-surface)));
  --sfm-rim-c: light-dark(color-mix(in srgb, var(--color-ink-subtle) 74%, var(--color-surface)), color-mix(in srgb, var(--color-tabbar) 70%, var(--color-surface)));
  --sfm-face-a: light-dark(color-mix(in srgb, var(--color-ink-subtle) 8%, var(--color-surface)), color-mix(in srgb, var(--color-ink) 13%, var(--color-surface)));
  --sfm-face-b: light-dark(color-mix(in srgb, var(--color-ink-subtle) 30%, var(--color-surface)), color-mix(in srgb, var(--color-tabbar) 35%, var(--color-surface)));
  --sfm-polish: color-mix(in srgb, var(--color-ink) 4%, transparent);
  --sfm-sheen: color-mix(in srgb, var(--sfm-hi) 15%, transparent);
  --sfm-glintc: color-mix(in srgb, var(--sfm-hi) 70%, transparent);
  --sfm-size: 100px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* ---------------- medal ---------------- */

.sfm-box {
  position: relative;
  flex: none;
  width: var(--sfm-size);
  height: var(--sfm-size);
}

.sfm-hang {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--pivot, -20px);
}

.sfm-press {
  position: absolute;
  inset: 0;
  perspective: 520px;
}

.sfm-coin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.sfm-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--sfm-lo) 60%, transparent);
}

.sfm-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* thickness of the medal (it only shows edge-on, during the turn) */
.sfm-edge {
  position: absolute;
  top: 2%;
  left: calc(50% - 3.5px);
  width: 7px;
  height: 96%;
  border-radius: 3.5px;
  background: repeating-linear-gradient(to bottom, var(--sfm-rim-a) 0 1px, var(--sfm-rim-c) 1px 2px);
  transform: rotateY(90deg);
  opacity: 0;
}

.sfm-rim-a { stop-color: var(--sfm-rim-a); }
.sfm-rim-b { stop-color: var(--sfm-rim-b); }
.sfm-rim-c { stop-color: var(--sfm-rim-c); }
.sfm-bevel-a { stop-color: var(--sfm-lo); }
.sfm-bevel-b { stop-color: var(--sfm-hi); stop-opacity: 0.55; }
.sfm-face-a { stop-color: var(--sfm-face-a); }
.sfm-face-b { stop-color: var(--sfm-face-b); }
.sfm-brand-a { stop-color: var(--color-brand-from); }
.sfm-brand-b { stop-color: var(--color-brand-to); }

.sfm-mask { mask-type: alpha; }
.sfm-mask path { fill: var(--color-ink); }

.sfm-groove { stroke: color-mix(in srgb, var(--sfm-lo) 70%, transparent); }
.sfm-polish { fill: var(--sfm-polish); }

.sfm-mold { stroke: var(--sfm-mold); }
.sfm-lo { stroke: var(--sfm-lo); }
.sfm-hi { stroke: color-mix(in srgb, var(--sfm-hi) 55%, transparent); }
.sfm-main { stroke: var(--sfm-main); }
.sfm-freshline { stroke: var(--color-accent); }
.sfm-fresh { opacity: 0; }

.sfm-frontline {
  stroke: color-mix(in srgb, var(--color-accent) 45%, transparent);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.sfm-dot { fill: var(--color-accent); }

.sfm-dothalo {
  fill: var(--color-accent);
  opacity: 0.12;
  transform-box: fill-box;
  transform-origin: center;
  animation: sfm-breathe 3.6s ease-in-out infinite;
}

.sfm-front.is-hot .sfm-dothalo {
  animation: sfm-hot 1.1s cubic-bezier(.2,.7,.3,1) 1, sfm-breathe 3.6s ease-in-out 1.1s infinite;
}

@keyframes sfm-breathe {
  0%, 100% { opacity: 0.1; transform: scale(0.85); }
  50% { opacity: 0.22; transform: scale(1.1); }
}

@keyframes sfm-hot {
  0% { opacity: 0.6; transform: scale(0.6); }
  35% { opacity: 0.45; transform: scale(1.7); }
  100% { opacity: 0.1; transform: scale(0.85); }
}

/* Constant: a metallic sheen (two lobes, like brushed metal) turning slowly over the face… */
.sfm-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 6%, var(--sfm-sheen) 14%, transparent 24% 50%, var(--sfm-sheen) 64%, transparent 74%);
  animation: sfm-turn 22s linear infinite;
  pointer-events: none;
}

/* …and a glint that travels along the rim. */
.sfm-rimglint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 80%, color-mix(in srgb, var(--sfm-hi) 55%, transparent) 90%, transparent 97%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 85%, var(--color-ink) 87% 97.5%, transparent 99%);
  mask-image: radial-gradient(closest-side, transparent 85%, var(--color-ink) 87% 97.5%, transparent 99%);
  animation: sfm-turn 9s cubic-bezier(.45,.05,.55,.95) infinite;
  pointer-events: none;
}

@keyframes sfm-turn {
  to { transform: rotate(360deg); }
}

.sfm-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sfm-lo);
  opacity: 0;
  pointer-events: none;
}

.sfm-glare {
  position: absolute;
  inset: -12%;
  background: linear-gradient(112deg, transparent 36%, color-mix(in srgb, var(--sfm-hi) 22%, transparent) 45%, color-mix(in srgb, var(--sfm-hi) 70%, transparent) 50%, color-mix(in srgb, var(--sfm-hi) 22%, transparent) 55%, transparent 64%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.is-glare .sfm-glare {
  animation: sfm-glare 0.95s cubic-bezier(.45,.05,.3,1) 1 both;
}

@keyframes sfm-glare {
  0% { transform: translateX(-120%); opacity: 1; }
  100% { transform: translateX(120%); opacity: 1; }
}

/* thin wave of the press strike */
.sfm-ripple {
  position: absolute;
  inset: 0;
  border: 1px solid var(--sfm-hi);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* celebration glints (a few small 4-point stars, once) */
.sfm-glints {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sfm-glint {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--sfm-glintc);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: scale(0);
  opacity: 0;
}

.is-glare .sfm-glint {
  animation: sfm-glint 1s cubic-bezier(.2,.7,.3,1) 1 both;
}

@keyframes sfm-glint {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  35% { transform: scale(var(--s)) rotate(35deg); opacity: 1; }
  100% { transform: scale(0) rotate(80deg); opacity: 0; }
}

/* ribbon (drops in from behind when the goal is reached) */
.sfm-ribbon {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.sfm-ribbon-drop {
  transform: translateY(-110%);
  opacity: 0;
}

.is-ribbon .sfm-ribbon-drop {
  transform: none;
  opacity: 1;
}

.is-celebrating.is-ribbon .sfm-ribbon-drop {
  transition: transform 0.8s cubic-bezier(.22,1.1,.36,1), opacity 0.25s linear;
}

.sfm-strap.is-left .sfm-strap-body { fill: var(--color-brand-to); }
.sfm-strap.is-right .sfm-strap-body { fill: var(--color-brand-from); }
.sfm-strap-stripe { stroke: color-mix(in srgb, var(--color-ink-inverse) 70%, transparent); stroke-width: 2; }
.sfm-strap-thin { stroke: color-mix(in srgb, var(--color-tabbar) 35%, transparent); stroke-width: 0.8; }

/* the strike before the turn: the medal "lifts" a little off the table */
.sfm-box.is-lifted .sfm-face {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sfm-lo) 75%, transparent);
}

/* ---------------- goal reached: the brand colour, softly ---------------- */

.sfm.is-won {
  --sfm-main: url(#sfm-brand);
  --sfm-rim-a: light-dark(color-mix(in srgb, var(--color-brand-from) 22%, var(--color-surface)), color-mix(in srgb, var(--color-brand-from) 30%, color-mix(in srgb, var(--color-ink) 62%, var(--color-surface))));
  --sfm-rim-b: light-dark(color-mix(in srgb, var(--color-brand-from) 50%, var(--color-surface)), color-mix(in srgb, var(--color-brand-to) 24%, color-mix(in srgb, var(--color-ink-subtle) 42%, var(--color-surface))));
  --sfm-rim-c: light-dark(color-mix(in srgb, var(--color-brand-to) 66%, var(--color-surface)), color-mix(in srgb, var(--color-brand-to) 18%, color-mix(in srgb, var(--color-tabbar) 70%, var(--color-surface))));
  --sfm-face-a: light-dark(color-mix(in srgb, var(--color-brand-from) 10%, var(--color-surface)), color-mix(in srgb, var(--color-brand-from) 7%, color-mix(in srgb, var(--color-ink) 13%, var(--color-surface))));
  --sfm-face-b: light-dark(color-mix(in srgb, var(--color-brand-to) 24%, var(--color-surface)), color-mix(in srgb, var(--color-brand-to) 6%, color-mix(in srgb, var(--color-tabbar) 35%, var(--color-surface))));
  --sfm-polish: transparent;
  --sfm-sheen: color-mix(in srgb, var(--color-brand-from) 15%, transparent);
}

.sfm.is-won .sfm-main { stroke: url(#sfm-brand); }

/* final state: the hanging medal sways gently with its ribbon */
.sfm.is-final .sfm-hang {
  animation: sfm-sway 6s ease-in-out infinite alternate;
}

@keyframes sfm-sway {
  from { transform: rotate(-0.9deg); }
  to { transform: rotate(0.9deg); }
}

.sfm.is-final .sfm-sheen {
  animation-duration: 16s;
}

/* ---------------- numbers ---------------- */

.sfm-text {
  min-width: 0;
}

.sfm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  line-height: 30px;
}

.sfm-pct {
  font-weight: 500;
  font-size: 1.625rem;
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
}

.sfm-slot {
  display: grid;
  align-items: baseline;
}

.sfm-dameta,
.sfm-chip {
  grid-area: 1 / 1;
}

.sfm-dameta {
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.sfm-chip {
  display: none;
  align-items: center;
  gap: 5px;
  align-self: center;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--color-accent-line);
  border-radius: 999px;
  background: var(--color-accent-soft);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.sfm-chip .icon {
  width: 13px;
  height: 13px;
  color: var(--color-accent);
}

.is-hit .sfm-dameta { display: none; }

.is-hit .sfm-chip {
  display: inline-flex;
}

.is-celebrating.is-hit .sfm-chip {
  animation: sfm-in 0.5s cubic-bezier(.2,.8,.2,1) 1 both;
}

@keyframes sfm-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.sfm-sum {
  line-height: 20px;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* "de R$ 100.000,00" never splits; on a very narrow screen the line breaks before "de". */
.sfm-of {
  white-space: nowrap;
}

.sfm-sum strong {
  font-weight: 500;
  color: var(--color-ink);
}

/* The medal takes the keyboard focus (it opens the balloon): a round ring around it. */
.sfm-box {
  border-radius: 50%;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.sfm-box:focus-visible {
  outline-offset: 5px;
}

/* The balloon with "Meta até 31/12" and "faltam R$ …" / "+R$ … acima da meta". It lives on the
   body with position: fixed (placed by medal.js), so the card never cuts it. */
.sfm-tip {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-md);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  visibility: hidden;
  pointer-events: none;
}

.sfm-tip.is-below {
  transform: translateY(-3px);
}

.sfm-tip.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* the small arrow pointing at the medal */
.sfm-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--sfm-tip-arrow, 50%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  transform: rotate(45deg);
}

.sfm-tip.is-below::after {
  top: 0;
  transform: rotate(225deg);
}

.sfm-tip.is-left {
  transform: translateX(-3px);
}

.sfm-tip.is-left::after {
  top: 50%;
  left: 100%;
  transform: rotate(-45deg);
}

.sfm-tip.is-open {
  transform: none;
}

.sfm-when {
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-ink-muted);
}

.sfm-delta {
  font-size: var(--font-size-caption);
  line-height: 20px;
  font-weight: 500;
  color: var(--color-ink);
}

.sfm-delta.is-over {
  color: var(--color-positive);
}

.sfm.is-paused *,
.sfm.is-paused *::before {
  animation-play-state: paused !important;
}

/* ----- chart card (no title, no legend, no "atualizado": the owner asked) ----------------- */

.sfi-chart {
  height: 168px;
  overflow: hidden;
}

.sfi-chart__slot {
  width: 100%;
  height: 100%;
}

/* ----- "Por oferta" and "Mapa de vendas" -------------------------------------------------- */

.sfi-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sf-gap);
}

.sfi-offers__list {
  padding: 0 20px 12px;
}

.sfi-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 9px 0 8px;
}

.sfi-offer + .sfi-offer {
  border-top: 1px solid var(--color-border);
}

.sfi-offer__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.sfi-offer__sub {
  grid-column: 1;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-ink-subtle);
}

.sfi-offer__value {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin-top: -1px;
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sfi-offer .sfi-bar {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* The map component brings its own margins (20 px on the sides, 7 above, 16 below). */
.sfi-map__slot {
  min-height: 15.5rem;
}

/* ----- campaigns (phones: compact rows) --------------------------------------------------- */

.sfi-camps__list {
  padding: 0 20px;
}

.sfi-camp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "who roas"
    "nums roas";
  align-items: center;
  column-gap: 16px;
  padding: 10px 0;
}

.sfi-camp + .sfi-camp {
  border-top: 1px solid var(--color-border);
}

.sfi-camp__who {
  grid-area: who;
  min-width: 0;
}

.sfi-camp__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.sfi-camp__sub {
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-ink-subtle);
}

.sfi-camp__n {
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sfi-camp__sales,
.sfi-camp__spend {
  grid-area: nums;
  font-size: var(--font-size-xs);
  line-height: 18px;
}

.sfi-camp__spend {
  margin-left: 6.5em;
}

.sfi-camp__roas {
  grid-area: roas;
  width: 72px;
}

.sfi-camp__roas strong {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-body-lg);
  line-height: 20px;
  white-space: nowrap;
}

.sfi-camp__roas .sfi-bar {
  margin-top: 1px;
}

.sfi-camp__roas.is-good strong {
  color: var(--color-positive);
}

.sfi-camp__roas.is-bad strong {
  color: var(--color-danger);
}

.sfi-camps__foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px 4px;
}

.sfi-more {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--sf-radius-ctl);
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  font-weight: 500;
  cursor: pointer;
}

.sfi-more:hover {
  color: var(--color-ink);
}

/* ----- failure ---------------------------------------------------------------------------- */

.sfi-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-14) var(--space-5);
  text-align: center;
}

.sfi-fail__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: 999px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.sfi-fail__title {
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-tight);
}

.sfi-fail__text {
  max-width: 34rem;
  margin-bottom: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.sfi-fail__retry .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ----- the Início grows with its own width ------------------------------------------------ */

@container sfi (min-width: 560px) {
  .sfi-camp {
    grid-template-columns: minmax(0, 1fr) 95px 102px 72px;
    grid-template-areas: "who sales spend roas";
    column-gap: 0;
    min-height: 55px;
    padding: 0 0 2px;
  }

  .sfi-camp__sales {
    grid-area: sales;
  }

  .sfi-camp__spend {
    grid-area: spend;
    margin-left: 0;
  }

  .sfi-camp__sales,
  .sfi-camp__spend {
    font-size: var(--font-size-caption);
    line-height: inherit;
  }

  .sfi-camp__roas {
    position: relative;
    top: -1px;
  }
}

@container sfi (min-width: 640px) {
  .sfi-hero {
    grid-template-columns: minmax(0, 1fr) 248px;
  }

  .sfi-hero__main {
    padding: 24px 24px 18px;
  }

  .sfi-stats {
    grid-column: 1;
  }

  .sfi-goal {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 12px;
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .sfm {
    --sfm-size: 152px;
    flex-direction: column;
    align-self: stretch;
    gap: 16px;
    height: 100%;
    padding: 46px 0 20px; /* room for the whole ribbon above the medal */
  }

  /* The medal and the percentage in the middle of the free space; "R$ X de R$ Y" lower, near
     the bottom of the column (the owner asked). */
  .sfm-text {
    display: contents;
  }

  .sfm-box {
    margin-top: auto;
  }

  .sfm-sum {
    margin-top: auto;
    text-align: center;
  }

  .sfm-row {
    justify-content: center;
  }

  .sfm-pct {
    font-size: 1.75rem;
  }

  .sfi-figure {
    font-size: 3.5rem;
  }

  .sfi-stat__v {
    font-size: 1.875rem;
  }

  .sfi-chart {
    height: 198px;
  }
}

@container sfi (min-width: 900px) {
  .sfi-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(295px, auto);
  }
}

/* As in the approved picture: four numbers in a row and the goal column of 302 px. */
@container sfi (min-width: 1000px) {
  .sfi-hero {
    grid-template-columns: minmax(0, 1fr) 302px;
    grid-template-rows: 184px 115px;
  }

  .sfi-hero__main {
    padding: 24px 24px 0;
  }

  .sfi-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sfi-stat {
    padding: 16px 4px 0 20px;
  }

  .sfi-stat:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .sfi-stat:first-child {
    border-left: 0;
  }

  .sfi-stat__s {
    white-space: nowrap;
  }

  .sfi-goal {
    padding: 0;
  }

  .sfm {
    --sfm-size: 156px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sfi-board {
    transition: none;
  }

  /* The medal: no constant motion and no turn; the state at once. */
  .sfm *,
  .sfm.is-final .sfm-hang {
    animation: none !important;
    transition: none !important;
  }

  .sfm-sheen {
    transform: rotate(40deg);
  }

  .sfm-rimglint {
    transform: rotate(-30deg);
  }

  .sfm-tip,
  .sfm-tip.is-open {
    transform: none;
    transition: none;
  }
}