/* Ch.eaf customer app shell.
   Loaded after styles.css on the /app pages only. Reuses the brand tokens,
   fonts, buttons, age gate, toast and concierge styles from styles.css and
   adds the phone tab bar, the desktop sidebar and the app page layouts. */

:root {
  --app-tabbar-height: 64px;
  --app-sidebar-width: 236px;
  --app-banner-top: var(--chiefco-stakeholder-banner-height, 0px);
}

body.app-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  margin: 0;
  padding-bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom, 0px));
}

body.app-page.age-locked {
  overflow: hidden;
}

.signin-main {
  width: min(460px, calc(100% - 32px));
}

.signin-main .seg-switch {
  margin-bottom: 14px;
}

.signin-main .app-form .app-meta {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.82rem;
}

.signin-main .app-note {
  margin-top: 12px;
}

.settings-editor label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}

.settings-editor .checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}

.settings-editor .form-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-editor .form-status.is-error {
  color: #9a2f2f;
}

.settings-editor input[type="text"],
.settings-editor input[type="date"],
.settings-editor input[type="url"],
.settings-editor select,
.app-form input[type="text"],
.app-form input[type="email"],
.app-form input[type="password"],
.app-form input[type="date"],
.app-form input[type="url"],
.app-form textarea,
.app-form select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}

.app-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-skip {
  position: absolute;
  left: 12px;
  top: calc(var(--app-banner-top) + 12px);
  z-index: 130;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;
  transform: translateY(-200%);
}

.app-skip:focus {
  transform: none;
}

/* The marketing stylesheet gives buttons and links their own display value,
   so the hidden attribute needs to win inside the app. */
.app-page [hidden] {
  display: none !important;
}

/* Top bar (phones and tablets) */
.app-topbar {
  position: sticky;
  top: var(--app-banner-top);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 8px 16px;
  background: var(--charcoal);
  color: #fff;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}

.app-brand .brand-crop {
  width: 124px;
  height: 40px;
}

.app-brand .brand-crop img {
  top: -42px;
  left: -14px;
  width: 152px;
}

.app-topbar-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-topbar .primary.compact {
  min-height: 40px;
  padding: 0 16px;
}

.app-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-location span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin's way back to the console from the customer pages (phone top bar). */
.app-location.is-admin {
  flex: none;
  max-width: none;
  border-color: rgba(255, 255, 255, 0.45);
}

.app-location.is-admin svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Shell grid */
.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.app-sidebar {
  display: none;
}

.app-main {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 32px;
  outline: none;
}

.app-main > * + * {
  margin-top: 16px;
}

.app-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.app-lede {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 60ch;
}

.app-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.app-notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--moss);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.94rem;
}

.app-notice.is-warn {
  border-left-color: #c98a17;
}

.app-notice.is-error {
  border-left-color: #b23b3b;
}

.app-notice a {
  color: var(--forest);
  font-weight: 600;
}

/* Feed controls */
.feed-controls {
  display: grid;
  gap: 10px;
}

.app-search {
  display: block;
}

.app-search input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23656b61' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 13px center;
  font: inherit;
  color: var(--ink);
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: #fff;
}

.fresh-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.fresh-line .fresh-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--moss);
  vertical-align: middle;
}

.fresh-line.is-stale .fresh-dot {
  background: #c98a17;
}

/* Cards */
/* minmax(0, 1fr) keeps a long retailer name from widening the column past the phone. */
.listing-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.app-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.app-card.is-selected {
  border-color: var(--moss);
  box-shadow: 0 0 0 2px rgba(99, 181, 40, 0.28);
}

.app-card.is-ended {
  opacity: 0.6;
  filter: grayscale(1);
}

.app-card.is-link {
  cursor: pointer;
}

.app-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-card h3,
.app-card h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.app-card .app-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.app-retailer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

.app-retailer.is-covered {
  color: var(--muted);
}

.app-retailer svg {
  flex: 0 0 auto;
}

.app-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.app-card-actions .primary,
.app-card-actions .secondary {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.9rem;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(99, 181, 40, 0.14);
  color: var(--forest);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-pill.is-warn {
  background: rgba(201, 138, 23, 0.14);
  color: #8a5b08;
}

.app-pill.is-gray {
  background: rgba(16, 18, 15, 0.08);
  color: var(--muted);
}

.app-pill.is-sample {
  background: rgba(16, 18, 15, 0.08);
  color: var(--ink);
}

/* The Browse list and what sits under it share one column on desktop */
.browse-list-col {
  display: grid;
  gap: 18px;
}

.browse-list-col > #feedFoot[hidden] {
  display: none;
}

/* Secondary sections under a page's main content. Links such as
   /app/admin/more#leads land here, so leave room for the sticky top bar. */
.app-subsection {
  display: grid;
  gap: 12px;
  scroll-margin-top: calc(var(--app-banner-top) + 76px);
}

.app-subsection .listing-list {
  display: grid;
  gap: 12px;
}

.app-subhead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.app-subhead + .app-meta {
  margin-top: 4px;
}

.how-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.how-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.how-step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  grid-row: 1 / span 2;
}

.how-step strong {
  display: block;
  font-weight: 600;
}

.how-step span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.92rem;
}

.area-card .app-back {
  font-size: 0.92rem;
}

.app-empty {
  padding: 28px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.app-empty h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--ink);
}

.app-empty p {
  margin: 0;
}

.app-empty .link-button {
  margin-top: 14px;
}

/* Detail */
.app-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
}

.app-detail {
  display: grid;
  gap: 14px;
}

.app-detail header {
  display: grid;
  gap: 8px;
}

.app-detail h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  text-wrap: balance;
}

.app-facts {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.app-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.app-facts > div:first-child {
  border-top: 0;
}

.app-facts dt {
  flex-shrink: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.app-facts dd {
  min-width: 0;
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.app-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.app-detail .listing-compliance {
  margin: 0;
}

.app-actions {
  display: grid;
  gap: 10px;
}

.app-btn-block {
  width: 100%;
  justify-content: center;
}

.app-teaser {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

/* Settings list (Account) */
.account-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.account-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.account-card .app-meta,
.app-subsection > div > .app-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.area-value {
  margin: 0;
  font-weight: 500;
}

.app-plain-list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.app-plain-list li::marker {
  color: var(--muted);
}

/* Alerts stacks its status, coverage rows and live list */
#alertsBody {
  display: grid;
  gap: 18px;
}

.settings-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.settings-list li + li {
  border-top: 1px solid var(--line);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.settings-row:hover {
  background: var(--surface-soft);
}

.settings-row .settings-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: right;
}

.settings-row .settings-value::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.settings-row.is-static .settings-value::after {
  display: none;
}

.settings-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.settings-editor h2 {
  margin: 0;
  font-size: 1.15rem;
}

.settings-editor .category-checks {
  display: grid;
  gap: 8px;
}

.settings-editor .editor-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.danger {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(178, 59, 59, 0.5);
  border-radius: 999px;
  background: #fff;
  color: #9a2f2f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.danger:hover {
  background: rgba(178, 59, 59, 0.06);
}

/* Sign in */
.seg-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: rgba(16, 18, 15, 0.08);
}

.seg-switch button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.seg-switch button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.app-form {
  display: grid;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.app-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}

.app-form .checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}

.app-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app-form .form-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.9rem;
}

.app-form .form-status.is-error {
  color: #9a2f2f;
}

.link-plain {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signin-center {
  text-align: center;
}

/* Phone tab bar. The marketing stylesheet styles every <nav> as a centered
   pill and hides it under 981px, so the app's nav elements reset that. */
.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: block;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.app-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--app-tabbar-height);
}

.app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.app-tab svg {
  width: 24px;
  height: 24px;
}

.app-tab[aria-current="page"] {
  color: var(--forest);
}

.app-tab .app-badge {
  position: absolute;
  transform: translate(14px, -6px);
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-size: 0.65rem;
  text-align: center;
}

/* Keep floating helpers clear of the tab bar on phones */
body.app-page .leafline-concierge {
  bottom: calc(var(--app-tabbar-height) + 14px + env(safe-area-inset-bottom, 0px));
}

/* The marketing stylesheet pins phone toasts under the top bar; inside the app
   they sit above the tab bar instead, so the top anchor has to be released or
   the toast stretches between both edges. */
body.app-page .toast {
  top: auto;
  bottom: calc(var(--app-tabbar-height) + 24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(12px);
}

body.app-page .toast.show {
  transform: translateY(0);
}

/* Phones never show the floating Help ticket (the marketing stylesheet hides
   it under 981px). Visitors and retailers reach Help from the tab bar; signed-in
   customers reach it from the Account page. */

/* Desktop: sidebar + list/detail side by side */
@media (min-width: 981px) {
  body.app-page {
    padding-bottom: 0;
  }

  .app-topbar,
  .app-tabbar {
    display: none;
  }

  .app-subsection {
    scroll-margin-top: calc(var(--app-banner-top) + 16px);
  }

  /* Desktop puts Help in the sidebar for every role, so the floating ticket
     never sits on top of the detail panel. The Help panel still opens in the
     corner. */
  body.app-page .leafline-ticket {
    display: none;
  }

  .app-shell {
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    min-height: calc(100dvh - var(--app-banner-top));
  }

  .app-sidebar {
    position: sticky;
    top: var(--app-banner-top);
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: calc(100dvh - var(--app-banner-top));
    padding: 22px 16px;
    background: var(--charcoal);
    color: #fff;
  }

  .app-sidebar .app-brand {
    padding: 0 6px;
  }

  .app-sidenav {
    display: grid;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .app-sidenav .app-tab,
  .app-sidefoot .app-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
  }

  .app-sidenav .app-tab:hover,
  .app-sidefoot .app-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .app-sidenav .app-tab[aria-current="page"] {
    background: rgba(99, 181, 40, 0.18);
    color: #fff;
  }

  .app-sidenav .app-tab svg,
  .app-sidefoot .app-tab svg {
    width: 20px;
    height: 20px;
  }

  .app-sidefoot {
    margin-top: auto;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
  }

  .app-sidefoot strong {
    color: #fff;
    font-weight: 600;
  }

  .app-sidefoot .primary {
    justify-content: center;
  }

  .app-main {
    width: min(1120px, calc(100% - 64px));
    padding: 30px 0 48px;
  }

  /* Single-column pages read like a settings screen, not a spreadsheet. */
  .app-main.app-narrow {
    width: min(760px, calc(100% - 64px));
  }

  .app-main.signin-main {
    width: min(460px, calc(100% - 64px));
  }

  .browse-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 20px;
    align-items: start;
  }

  .detail-panel {
    position: sticky;
    top: calc(var(--app-banner-top) + 24px);
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  .detail-panel[hidden] {
    display: none;
  }

  .detail-panel .app-detail h1 {
    font-size: 1.4rem;
  }

  body.app-page .leafline-concierge {
    bottom: 18px;
  }

  body.app-page .toast {
    bottom: 24px;
  }
}

@media (max-width: 980px) {
  .browse-columns .detail-panel {
    display: none;
  }
}

@media (max-width: 480px) {
  .app-form .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Page-to-page transitions. Every tab is its own page, so the browser keeps
   the old page on screen until the next one has painted, then crossfades only
   the main column. The top bar, sidebar and tab bar are captured on their own
   so they never take part in the fade. Browsers without cross-document view
   transitions ignore all of this. */
@view-transition {
  navigation: auto;
}

.app-topbar {
  view-transition-name: app-topbar;
}

.app-sidebar {
  view-transition-name: app-sidebar;
}

.app-tabbar {
  view-transition-name: app-tabbar;
}

.app-main {
  view-transition-name: app-main;
}

::view-transition-group(*) {
  animation-duration: 160ms;
}

::view-transition-old(app-main) {
  animation: app-page-out 120ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(app-main) {
  animation: app-page-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes app-page-out {
  to {
    opacity: 0;
  }
}

@keyframes app-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-skip,
  .app-tab,
  .chip,
  .settings-row {
    transition: none;
  }

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Retailer app ---------- */

/* Page title with the retailer's name above it and "+ New listing" beside it */
.app-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.app-title-row > div {
  min-width: 0;
}

.app-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.app-eyebrow:empty {
  display: none;
}

.chip-count {
  margin-left: 2px;
  color: var(--muted);
  font-weight: 500;
}

.chip[aria-pressed="true"] .chip-count {
  color: inherit;
  opacity: 0.8;
}

.app-form textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}

.app-form label > .app-meta {
  font-weight: 500;
  font-size: 0.85rem;
}

.posting-as {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper-2, rgba(16, 18, 15, 0.04));
  line-height: 1.45;
}

.posting-as strong {
  color: var(--ink);
}

/* Where a listing sits in review: a real sequence, so the numbers carry meaning */
.listing-steps .how-step {
  opacity: 0.72;
}

.listing-steps .how-step.is-current,
.listing-steps .how-step.is-done {
  opacity: 1;
}

.listing-steps .how-step.is-current {
  border-color: var(--forest);
}

.listing-steps .how-step.is-done::before {
  background: var(--forest);
}

.withdraw-confirm {
  display: grid;
  gap: 10px;
}

.withdraw-confirm p {
  margin: 0;
}

.withdraw-confirm .app-actions {
  margin: 0;
}

.customer-view {
  cursor: default;
}

.customer-view .app-meta + .app-meta {
  margin-top: 2px;
}

.settings-row.is-static .settings-value {
  overflow-wrap: anywhere;
}

.post-sent {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

@media (max-width: 480px) {
  .app-form .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Admin app ---------- */

/* Today's counts: four plain tiles, the number first because the number is the point */
.admin-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.admin-count {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.admin-count strong {
  font-family: var(--font-display, inherit);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}

.admin-count.is-zero strong {
  color: var(--muted);
}

.admin-count span {
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--muted);
}

.admin-count:hover,
.admin-count:focus-visible {
  border-color: var(--moss);
}

/* Recent decisions and the audit log: one action per line */
.admin-audit {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-audit li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.35;
  min-width: 0;
}

.admin-audit li > * {
  overflow-wrap: anywhere;
}

.admin-audit strong {
  color: var(--ink);
}

/* Rows: cards on a phone, table rows on a desktop */
.admin-row {
  gap: 6px;
}

.admin-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  font-size: 0.9rem;
}

.admin-cell-main {
  align-items: center;
  gap: 10px;
}

.admin-cell-main h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-cell-label {
  flex: 0 0 auto;
  color: var(--muted);
}

.admin-cell-value {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.admin-cell-action {
  justify-content: flex-end;
  margin-top: 4px;
}

.admin-head {
  display: none;
}

.admin-table {
  display: grid;
  gap: 12px;
}

/* Decisions sit under the facts, separated by a rule instead of another card */
.admin-decision {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-decision .app-actions,
.admin-decision .app-notice,
.admin-decision .app-note {
  margin: 0;
}

.admin-decision select {
  width: 100%;
}

.admin-note {
  display: grid;
  gap: 6px;
}

.admin-note textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}

.app-sidefoot .ghost {
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.24);
}

@media (min-width: 981px) {
  .admin-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-table {
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .admin-head,
  .admin-table .admin-row {
    display: grid;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
  }

  .admin-table[data-cols="3"] .admin-head,
  .admin-table[data-cols="3"] .admin-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .admin-head {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
  }

  .admin-table .admin-row {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--line);
  }

  .admin-table .admin-head + .admin-row {
    border-top: 0;
  }

  .admin-table .admin-row.is-selected {
    box-shadow: inset 3px 0 0 var(--forest);
    background: rgba(99, 181, 40, 0.06);
  }

  .admin-cell {
    display: block;
    font-size: 0.92rem;
  }

  .admin-cell-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }

  .admin-cell-main h3 {
    font-size: 1rem;
    flex: 1 1 100%;
  }

  .admin-cell-label {
    display: none;
  }

  .admin-cell-value {
    text-align: left;
  }

  .admin-cell-action {
    margin: 0;
  }

  /* The sidebar count sits at the end of its row instead of floating over the icon */
  .app-sidenav .app-tab .app-badge {
    position: static;
    transform: none;
    margin-left: auto;
  }
}

/* ---------- Big Impact (customer app) ----------
   Green header, Anton poster numerals, black hero card, black tab bar.
   Scoped to body.big-impact so the retailer and admin apps keep their look.
   Motion: every animation writes only a `from` state, so the resting markup is
   the finished state and reduced motion simply removes the animation.
   --bi-elapsed / --bi-moment-elapsed let a re-render resume an animation
   mid-flight instead of restarting it. */

body.big-impact {
  --bi-bg: #f3f4ef;
  --bi-ink: #10120f;
  --bi-muted: #656b61;
  --bi-faint: #8b9187;
  --bi-line: #d9ddd3;
  --bi-black: #080a07;
  --bi-green: #63b528;
  --bi-green-bright: #74c73a;
  --bi-on-green: #071004;
  --bi-dark-muted: #8f978c;
  --bi-dark-text: #c9cec5;
  --bi-ended: #6c7268;
  --bi-ended-btn: #2a2d28;
  --bi-row: #e7e9e3;
  --bi-flash: #e4f5d3;
  --bi-pulse: rgba(99, 181, 40, 0.75);
  --bi-elapsed: 0ms;
  --app-tabbar-height: 72px;
  background: var(--bi-bg);
  color: var(--bi-ink);
}

body.big-impact .app-topbar {
  min-height: 60px;
  background: var(--bi-black);
}

body.big-impact .app-location {
  gap: 6px;
  max-width: 200px;
  padding: 8px 12px 8px 10px;
  border: 0;
  background: var(--bi-green);
  color: var(--bi-on-green);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.big-impact .app-location:hover,
body.big-impact .app-location:focus-visible {
  background: var(--bi-green-bright);
}

body.big-impact .app-location svg {
  flex: none;
  width: 14px;
  height: 14px;
}

body.big-impact .app-location.is-admin {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

body.big-impact .app-location.is-admin:hover,
body.big-impact .app-location.is-admin:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

body.big-impact .app-topbar .primary.compact {
  border-color: var(--bi-green);
  background: var(--bi-green);
  color: var(--bi-on-green);
  font-weight: 800;
}

/* Poster type */

.bi-num {
  font-family: var(--font-poster);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.bi-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bi-faint);
}

/* Browse header */

body.big-impact .browse-hero {
  display: grid;
  gap: 6px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: var(--bi-green);
  color: var(--bi-on-green);
}

body.big-impact .browse-hero .bi-eyebrow {
  min-height: 1em;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

body.big-impact .browse-hero h1 {
  margin: 0;
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(44px, 13.5vw, 58px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body.big-impact .browse-hero .bi-line {
  display: block;
  transform-origin: left bottom;
}

body.big-impact .browse-hero .bi-count {
  display: inline-block;
  transform-origin: left bottom;
}

body.big-impact .browse-hero .bi-sub {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.92;
}

body.big-impact .browse-hero.is-empty {
  background: var(--bi-black);
  color: #fff;
}

body.big-impact .browse-hero.is-empty .bi-sub {
  color: var(--bi-dark-text);
}

/* Live ticker strip (Phase 2 fills it) */

body.big-impact .bi-ticker {
  display: flex;
  height: 32px;
  margin: -18px -16px 0;
  overflow: hidden;
  background: var(--bi-black);
  color: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

body.big-impact .bi-ticker + .browse-hero {
  margin-top: 14px;
}

.bi-ticker-track {
  display: flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  animation: bi-marquee 26s linear infinite;
}

.bi-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bi-dot {
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bi-green);
  animation: bi-pulse 1.8s ease-out infinite;
}

.app-pill .bi-dot {
  margin-right: 6px;
  background: currentColor;
  vertical-align: 1px;
}

@keyframes bi-marquee {
  to { transform: translateX(-100%); }
}

@keyframes bi-pulse {
  from { box-shadow: 0 0 0 0 var(--bi-pulse); }
  to { box-shadow: 0 0 0 9px transparent; }
}

/* Controls */

body.big-impact .feed-controls {
  gap: 10px;
}

body.big-impact .app-search input {
  min-height: 44px;
  border: 1.5px solid var(--bi-line);
  border-radius: 10px;
  background: #fff;
}

body.big-impact .app-search input:focus-visible {
  border-color: var(--bi-ink);
  outline: 0;
}

body.big-impact .chip {
  min-height: 34px;
  padding: 6px 13px;
  border: 1.5px solid var(--bi-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--bi-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.big-impact .chip[aria-pressed="true"] {
  border-color: var(--bi-ink);
  background: var(--bi-ink);
  color: #f4f5f0;
}

body.big-impact .fresh-line {
  color: var(--bi-faint);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.big-impact .fresh-line .fresh-dot {
  background: var(--bi-green);
}

/* Cards */

body.big-impact .app-card {
  gap: 6px;
  padding: 14px 16px 16px;
  border: 1px solid var(--bi-line);
  border-radius: 14px;
  color: var(--bi-ink);
  box-shadow: 0 1px 2px rgba(16, 18, 15, 0.04);
}

body.big-impact .app-card.is-selected {
  border-color: var(--bi-ink);
  box-shadow: 0 0 0 1px var(--bi-ink);
}

body.big-impact .app-card h3,
body.big-impact .app-card h2 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

body.big-impact .app-card .app-meta,
body.big-impact .app-card .app-retailer {
  font-size: 0.82rem;
  color: var(--bi-muted);
}

.bi-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.bi-price .bi-num {
  font-size: 44px;
}

.bi-price .bi-num.is-text {
  font-size: 30px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.bi-price .bi-off {
  font-family: var(--font-poster);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bi-muted);
}

body.big-impact .app-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--bi-black);
  color: var(--bi-green);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.big-impact .app-pill.is-warn {
  background: #3a2a0c;
  color: #f2c14e;
}

body.big-impact .app-pill.is-gray {
  border: 1.5px solid #b9bfb3;
  background: transparent;
  color: var(--bi-faint);
}

body.big-impact .app-pill.is-sample {
  background: #e9ecf2;
  color: #3e4a63;
}

body.big-impact .app-pill.is-new {
  background: var(--bi-black);
  color: var(--bi-green);
}

body.big-impact .app-card-actions {
  align-items: stretch;
  flex-wrap: nowrap;
  margin-top: 6px;
}

body.big-impact .app-card-actions .primary,
body.big-impact .app-card-actions .secondary {
  flex: 1 1 auto;
  min-height: 46px;
  border-radius: 10px;
  font-weight: 800;
}

body.big-impact .app-card-actions .primary {
  border-color: var(--bi-ink);
  background: var(--bi-ink);
  color: #f4f5f0;
}

body.big-impact .app-card-actions .secondary {
  border: 1.5px solid var(--bi-line);
  background: #fff;
  color: var(--bi-ink);
}

/* Hero post: the first live window. The card stays white like every post;
   its black poster carries the biggest numeral. */

body.big-impact .app-card.is-hero {
  box-shadow: 0 14px 34px rgba(8, 10, 7, 0.16);
}

body.big-impact .app-card.is-hero.is-selected {
  box-shadow: 0 0 0 2px var(--bi-green), 0 14px 34px rgba(8, 10, 7, 0.16);
}

body.big-impact .app-card.is-hero .bi-poster h3 {
  font-size: 1.12rem;
}

body.big-impact .app-card.is-hero .bi-price {
  position: relative;
}

body.big-impact .app-card.is-hero .bi-price .bi-num {
  font-size: 84px;
}

body.big-impact .app-card.is-hero .bi-price .bi-num.is-text {
  font-size: 44px;
}

body.big-impact .app-card.is-hero .bi-price .bi-off {
  font-size: 30px;
}

.bi-ends {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--bi-dark-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bi-ends .bi-num {
  font-size: 26px;
  color: var(--bi-green);
  letter-spacing: 0;
  transform-origin: left bottom;
}

/* Bookmark square */

.bi-save {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  min-height: 46px;
  padding: 0;
  border: 1.5px solid var(--bi-line);
  border-radius: 10px;
  background: #fff;
  color: var(--bi-ink);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.bi-save svg {
  width: 22px;
  height: 22px;
  transition: fill 160ms ease;
}

.bi-save:hover,
.bi-save:focus-visible {
  border-color: var(--bi-ink);
}

.bi-save[aria-pressed="true"] {
  border-color: var(--bi-green);
  background: rgba(99, 181, 40, 0.18);
  color: var(--bi-green);
}

.bi-save[aria-pressed="true"] svg {
  fill: currentColor;
}

.bi-save.is-wide {
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 0 16px;
  font-weight: 700;
}

/* Ended window: the compact "missed" row */

body.big-impact .app-card.is-ended {
  gap: 4px;
  padding: 12px 16px;
  border-color: transparent;
  background: var(--bi-row);
  color: var(--bi-ended);
  opacity: 1;
  filter: none;
  box-shadow: none;
}

body.big-impact .app-card.is-ended h3 {
  font-size: 0.95rem;
  color: var(--bi-muted);
}

body.big-impact .app-card.is-ended .bi-price .bi-num {
  font-size: 28px;
  color: var(--bi-ended);
}

body.big-impact .app-card.is-ended .bi-price .bi-off {
  color: var(--bi-faint);
}

body.big-impact .app-card.is-ended .app-card-actions .secondary {
  min-height: 40px;
  border-color: #b9bfb3;
  background: transparent;
  color: var(--bi-muted);
}

.bi-section-label {
  margin: 4px 0 -6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bi-faint);
}

body.big-impact .app-subsection h2 {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.95;
  text-transform: uppercase;
}

body.big-impact .app-empty {
  border: 1.5px dashed #b9bfb3;
  border-radius: 14px;
  color: var(--bi-muted);
}

body.big-impact .app-empty h2 {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--bi-ink);
}

/* Listing page */

body.big-impact .app-back {
  color: var(--bi-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.big-impact .app-detail {
  gap: 12px;
}

body.big-impact .app-detail header {
  gap: 8px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: var(--bi-green);
  color: var(--bi-on-green);
}

body.big-impact .app-detail.is-ended header {
  background: var(--bi-row);
  color: var(--bi-ended);
}

body.big-impact .app-detail header .app-meta {
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

body.big-impact .app-detail header .app-pill {
  background: var(--bi-black);
  color: var(--bi-green);
}

body.big-impact .app-detail.is-ended header .app-pill {
  border: 1.5px solid #b9bfb3;
  background: transparent;
  color: var(--bi-ink);
}

body.big-impact .app-detail header .bi-price .bi-num {
  font-size: clamp(88px, 30vw, 132px);
  color: inherit;
}

body.big-impact .app-detail header .bi-price .bi-num.is-text {
  font-size: clamp(40px, 12vw, 56px);
}

body.big-impact .app-detail header .bi-price .bi-off {
  font-size: 40px;
  color: inherit;
  opacity: 0.8;
}

body.big-impact .detail-panel .app-detail header .bi-price .bi-num {
  font-size: 84px;
}

body.big-impact .detail-panel .app-detail header .bi-price .bi-off {
  font-size: 28px;
}

body.big-impact .app-detail h1,
body.big-impact .app-detail h2 {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

body.big-impact .detail-panel .app-detail h2 {
  font-size: 1.2rem;
}

body.big-impact .app-detail .bi-retailer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bi-line);
  border-radius: 14px;
  background: #fff;
}

body.big-impact .app-detail .bi-retailer .app-retailer {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

body.big-impact .app-detail .bi-retailer .app-retailer span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.big-impact .app-detail .bi-retailer .app-retailer small {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bi-muted);
}

body.big-impact .app-detail .bi-retailer .app-retailer.is-covered {
  color: var(--bi-muted);
  font-weight: 600;
}

body.big-impact .app-detail .bi-retailer > svg {
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 10px;
  background: var(--bi-black);
  color: var(--bi-green);
}

body.big-impact .app-detail .bi-retailer .app-retailer svg {
  display: none;
}

.bi-countdown {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 16px;
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: var(--bi-black);
  color: #fff;
}

.bi-countdown .bi-label {
  color: var(--bi-dark-muted);
}

.bi-countdown .bi-num {
  display: block;
  margin-top: 4px;
  font-size: 44px;
  color: var(--bi-green);
  letter-spacing: 0;
  transform-origin: left bottom;
}

.bi-countdown .bi-value {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}

.bi-countdown .bi-live-strip {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.bi-countdown .bi-live-strip::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #63b528 38%, #c4f39a 50%, #63b528 62%);
  background-size: 240% 100%;
  animation: bi-shimmer 2.4s linear infinite;
}

.bi-countdown.is-ended {
  background: var(--bi-row);
  color: var(--bi-ended);
}

.bi-countdown.is-ended .bi-num {
  color: var(--bi-ended);
}

.bi-countdown.is-ended .bi-label {
  color: var(--bi-faint);
}

.bi-countdown.is-ended .bi-live-strip {
  display: none;
}

@keyframes bi-shimmer {
  to { background-position: -240% 0; }
}

@keyframes bi-breathe {
  to { transform: scale(1.025); }
}

body.big-impact .app-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
  overflow: visible;
}

body.big-impact .app-facts > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--bi-line);
  border-radius: 10px;
  background: #fff;
}

body.big-impact .app-facts > div:first-child {
  border-top: 1px solid var(--bi-line);
}

body.big-impact .app-facts dt {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bi-faint);
}

body.big-impact .app-facts dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.big-impact .app-note {
  border-color: var(--bi-line);
  border-radius: 10px;
  background: #fff;
}

body.big-impact .app-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.big-impact .app-actions > * {
  grid-column: 1 / -1;
}

body.big-impact .app-actions .primary {
  min-height: 54px;
  border-color: var(--bi-green);
  border-radius: 10px;
  background: var(--bi-green);
  color: var(--bi-on-green);
  font-size: 1rem;
  font-weight: 800;
}

body.big-impact .app-actions .primary:hover,
body.big-impact .app-actions .primary:focus-visible {
  background: var(--bi-green-bright);
}

body.big-impact .app-actions .secondary {
  min-height: 46px;
  border: 1.5px solid var(--bi-ink);
  border-radius: 10px;
  background: transparent;
  color: var(--bi-ink);
  font-weight: 700;
}

body.big-impact .app-actions .secondary.is-half {
  grid-column: auto;
}

body.big-impact .app-actions .bi-save.is-wide {
  min-height: 46px;
  border: 1.5px solid var(--bi-line);
  background: #fff;
}

body.big-impact .app-actions .app-back {
  justify-self: start;
}

/* Tab bar and sidebar */

body.big-impact .app-tabbar {
  border-top: 0;
  background: var(--bi-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.big-impact .app-tab {
  gap: 5px;
  padding: 10px 4px 8px;
  color: var(--bi-dark-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.big-impact .app-tab svg {
  width: 22px;
  height: 22px;
  transform-origin: center;
}

body.big-impact .app-tab[aria-current="page"],
body.big-impact .app-tab.is-bumped {
  color: var(--bi-green);
}

body.big-impact .app-tab .app-badge {
  border: 2px solid var(--bi-black);
  background: var(--bi-green);
  color: var(--bi-on-green);
  font-weight: 800;
}

body.big-impact .app-tab .app-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bi-green);
  transform: translate(10px, -2px);
}

/* ----- Moments (all one-shot) ----- */

/* Poster Drop entrance, once per app open */

body.big-impact.is-entering .app-tabbar {
  animation: bi-up 385ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(35ms - var(--bi-elapsed));
}

body.big-impact.is-entering .browse-hero {
  animation: bi-drop 640ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(40ms - var(--bi-elapsed));
}

body.big-impact.is-entering .browse-hero .bi-eyebrow {
  animation: bi-fade 280ms ease-out both;
  animation-delay: calc(560ms - var(--bi-elapsed));
}

body.big-impact.is-entering .browse-hero .bi-line {
  animation: bi-slam 385ms cubic-bezier(0.2, 1.25, 0.3, 1) both;
  animation-delay: calc(490ms - var(--bi-elapsed));
}

body.big-impact.is-entering .browse-hero .bi-line + .bi-line {
  animation-delay: calc(665ms - var(--bi-elapsed));
}

body.big-impact.is-entering .browse-hero .bi-sub {
  animation: bi-rise-12 280ms ease-out both;
  animation-delay: calc(910ms - var(--bi-elapsed));
}

body.big-impact.is-entering .feed-controls {
  animation: bi-rise-16 350ms ease-out both;
  animation-delay: calc(980ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero {
  animation: bi-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(1120ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero .app-card-row {
  animation: bi-fade 210ms ease-out both;
  animation-delay: calc(1400ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero .bi-price .bi-num {
  transform-origin: 40% 60%;
  animation: bi-stamp 280ms cubic-bezier(0.3, 0, 0.12, 1) both;
  animation-delay: calc(1470ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero .bi-price .bi-off {
  animation: bi-fade 210ms ease-out both;
  animation-delay: calc(1400ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero .bi-price::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 150px;
  height: 110px;
  margin-top: -55px;
  border: 3px solid var(--bi-green);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: bi-ring 770ms ease-out both;
  animation-delay: calc(1750ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero h3,
body.big-impact.is-entering .app-card.is-hero .app-retailer,
body.big-impact.is-entering .app-card.is-hero .bi-poster .app-meta,
body.big-impact.is-entering .app-card.is-hero .bi-ends {
  animation: bi-rise-14 350ms ease-out both;
  animation-delay: calc(1750ms - var(--bi-elapsed));
}

body.big-impact.is-entering .app-card.is-hero .app-card-actions {
  animation: bi-rise-14 350ms ease-out both;
  animation-delay: calc(1890ms - var(--bi-elapsed));
}

body.big-impact.is-entering .listing-list > .app-card:not(.is-hero),
body.big-impact.is-entering .listing-list > .bi-section-label,
body.big-impact.is-entering #feedFoot > * {
  animation: bi-rise-18 420ms ease-out both;
  animation-delay: calc(2100ms - var(--bi-elapsed));
}

body.big-impact.is-entering .listing-list > .app-card:not(.is-hero):nth-child(3) {
  animation-delay: calc(2310ms - var(--bi-elapsed));
}

body.big-impact.is-entering .listing-list > .app-card:not(.is-hero):nth-child(n + 4),
body.big-impact.is-entering #feedFoot > * {
  animation-delay: calc(2450ms - var(--bi-elapsed));
}

@keyframes bi-up {
  from { transform: translateY(100%); }
}

@keyframes bi-drop {
  from { transform: translateY(-101%); }
}

@keyframes bi-fade {
  from { opacity: 0; }
}

@keyframes bi-slam {
  from { opacity: 0; transform: translateY(26px) scale(1.14); }
}

@keyframes bi-rise-12 {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes bi-rise-14 {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes bi-rise-16 {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes bi-rise-18 {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes bi-pop {
  from { opacity: 0; transform: scale(0.94); }
}

@keyframes bi-stamp {
  from { opacity: 0; transform: scale(1.7) rotate(-8deg); }
}

@keyframes bi-ring {
  0% { opacity: 0; transform: scale(0.6); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Save moment */

.bi-save.is-just-saved {
  animation: bi-save-spring 480ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

.bi-save.is-just-saved svg {
  animation: bi-icon-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(90ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-save-spring {
  0% { transform: scale(0.88); box-shadow: 0 0 0 0 rgba(99, 181, 40, 0); }
  45% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(99, 181, 40, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(99, 181, 40, 0); }
}

@keyframes bi-icon-pop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.bi-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: 22px;
  height: 22px;
  color: var(--bi-green);
  pointer-events: none;
  will-change: transform;
}

.bi-fly svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

body.big-impact .app-tab.is-bumped svg {
  animation: bi-tab-pop 600ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

body.big-impact .app-tab .app-badge.is-popped {
  animation: bi-badge-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-tab-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes bi-badge-pop {
  from { transform: translate(14px, -6px) scale(0.4); }
}

/* Header count tick (window ends: shrink; window opens: grow) */

body.big-impact .browse-hero .bi-count.is-ticked-down {
  animation: bi-count-down 480ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

body.big-impact .browse-hero .bi-count.is-ticked-up {
  animation: bi-count-up 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-count-down {
  0% { transform: scale(1); }
  35% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes bi-count-up {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* Window ends: stamp, then fold into the missed row */

body.big-impact .app-card.is-ending {
  position: relative;
  overflow: hidden;
}

body.big-impact .app-card.is-ending .bi-price .bi-num,
body.big-impact .app-card.is-ending .bi-ends .bi-num {
  color: var(--bi-ended);
}

body.big-impact .app-card.is-ending .bi-price .bi-off {
  color: var(--bi-ended);
}

body.big-impact .app-card.is-ending .app-pill {
  border: 1.5px solid #b9bfb3;
  background: transparent;
  color: var(--bi-faint);
}

body.big-impact .app-card.is-ending .app-card-actions .primary,
body.big-impact .app-card.is-ending .bi-visit {
  border-color: var(--bi-row);
  background: var(--bi-row);
  color: var(--bi-ended);
}

.bi-stamp {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 2px 10px 0;
  border: 4px solid var(--bi-ink);
  border-radius: 6px;
  font-family: var(--font-poster);
  font-size: 56px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bi-ink);
  transform: rotate(-12deg);
  pointer-events: none;
  animation: bi-stamp-in 270ms cubic-bezier(0.3, 0, 0.12, 1) both, bi-stamp-out 300ms ease-in 1500ms both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms)), calc(1500ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-stamp-in {
  from { opacity: 0; transform: rotate(-12deg) scale(1.9); }
}

@keyframes bi-stamp-out {
  to { opacity: 0; }
}

body.big-impact .app-card.is-folding {
  height: 64px;
  opacity: 0;
  transition: height 540ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease 120ms;
}

body.big-impact .app-card.is-ended.is-arrived {
  animation: bi-fade 320ms ease-out both;
}

/* Window goes live: the slot opens, the new card flashes green and cools */

.bi-slot {
  display: grid;
  grid-template-rows: 1fr;
}

.bi-slot > .app-card {
  min-height: 0;
}

.bi-slot.is-opening {
  animation: bi-slot-open 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

.bi-slot.is-opening > .app-card {
  animation: bi-arrive 2300ms ease-out both;
  animation-delay: calc(160ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-slot-open {
  from { grid-template-rows: 0fr; }
}

@keyframes bi-arrive {
  0% { opacity: 0; transform: translateY(-16px); border-color: var(--bi-green); background: var(--bi-flash); box-shadow: 0 0 0 5px rgba(99, 181, 40, 0.35); }
  16% { opacity: 1; transform: none; border-color: var(--bi-green); background: var(--bi-flash); box-shadow: 0 0 0 5px rgba(99, 181, 40, 0.35); }
  36% { border-color: var(--bi-green); background: var(--bi-flash); box-shadow: 0 0 0 16px rgba(99, 181, 40, 0); }
  100% { border-color: var(--bi-line); background: #fff; box-shadow: 0 1px 2px rgba(16, 18, 15, 0.04); }
}

/* A window that arrives as the hero keeps its shadow: only the ring plays */
.bi-slot.is-opening > .app-card.is-hero {
  animation-name: bi-arrive-hero;
}

@keyframes bi-arrive-hero {
  0% { opacity: 0; transform: translateY(-16px); box-shadow: 0 0 0 5px rgba(99, 181, 40, 0.55), 0 14px 34px rgba(8, 10, 7, 0.22); }
  16% { opacity: 1; transform: none; box-shadow: 0 0 0 5px rgba(99, 181, 40, 0.55), 0 14px 34px rgba(8, 10, 7, 0.22); }
  36% { box-shadow: 0 0 0 16px rgba(99, 181, 40, 0), 0 14px 34px rgba(8, 10, 7, 0.22); }
  100% { box-shadow: 0 14px 34px rgba(8, 10, 7, 0.22); }
}

body.big-impact .app-tab.is-ringing {
  position: relative;
}

body.big-impact .app-tab.is-ringing svg {
  animation: bi-tab-pop 600ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

body.big-impact .app-tab.is-ringing::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  margin-top: -6px;
  border-radius: 50%;
  animation: bi-tab-ring 880ms ease-out both;
  animation-delay: calc(0ms - var(--bi-moment-elapsed, 0ms));
}

@keyframes bi-tab-ring {
  from { box-shadow: 0 0 0 0 rgba(99, 181, 40, 0.7); }
  to { box-shadow: 0 0 0 12px rgba(99, 181, 40, 0); }
}

/* Live numerals breathe while a window is open */

body.big-impact .app-card.is-hero .bi-ends .bi-num,
.bi-countdown:not(.is-ended) .bi-num {
  animation: bi-breathe 2.8s ease-in-out infinite alternate;
}

/* Desktop */

@media (min-width: 981px) {
  body.big-impact .app-sidebar {
    background: var(--bi-black);
  }

  body.big-impact .app-sidenav .app-tab {
    color: var(--bi-dark-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  body.big-impact .app-sidenav .app-tab:hover,
  body.big-impact .app-sidenav .app-tab:focus-visible {
    color: #fff;
  }

  body.big-impact .app-sidenav .app-tab[aria-current="page"],
  body.big-impact .app-sidenav .app-tab.is-bumped {
    background: rgba(99, 181, 40, 0.16);
    color: var(--bi-green);
  }

  body.big-impact .app-sidenav .app-tab .app-badge {
    border: 0;
  }

  body.big-impact .app-sidefoot .primary {
    border-color: var(--bi-green);
    background: var(--bi-green);
    color: var(--bi-on-green);
  }

  body.big-impact .bi-ticker {
    margin: 0;
    border-radius: 10px;
  }

  body.big-impact .bi-ticker + .browse-hero {
    margin-top: 16px;
  }

  body.big-impact .browse-hero {
    padding: 22px 26px 24px;
  }

  body.big-impact .browse-hero h1 {
    font-size: 64px;
  }

  body.big-impact .browse-hero .bi-line {
    display: inline;
  }

  body.big-impact .browse-hero .bi-line + .bi-line::before {
    content: " ";
  }

  body.big-impact .detail-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.big-impact.is-entering .app-tabbar {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.big-impact .bi-ticker-track,
  body.big-impact .bi-dot,
  body.big-impact .bi-live-strip::before,
  body.big-impact .bi-num,
  body.big-impact.is-entering *,
  body.big-impact.is-entering *::after,
  body.big-impact .bi-save.is-just-saved,
  body.big-impact .bi-save.is-just-saved svg,
  body.big-impact .app-tab.is-bumped svg,
  body.big-impact .app-tab.is-ringing svg,
  body.big-impact .app-tab.is-ringing::before,
  body.big-impact .app-tab .app-badge.is-popped,
  body.big-impact .bi-count.is-ticked-down,
  body.big-impact .bi-count.is-ticked-up,
  body.big-impact .bi-stamp,
  body.big-impact .bi-slot.is-opening,
  body.big-impact .bi-slot.is-opening > .app-card,
  body.big-impact .app-card.is-ended.is-arrived {
    animation: none !important;
  }

  body.big-impact .app-card.is-folding {
    transition: none;
  }

  body.big-impact .bi-ticker-track {
    flex-wrap: wrap;
    white-space: normal;
  }

  body.big-impact .bi-ticker-track[aria-hidden="true"] {
    display: none;
  }
}

/* Poster Drop hold: keep the stage dark until the feed answers, then the entrance reveals it */
body.big-impact.is-awaiting-entrance .app-main > *,
body.big-impact.is-awaiting-entrance .app-tabbar {
  visibility: hidden;
}

/* Page titles on Saved, Alerts and Account carry the same poster face as every
   other Big Impact heading */
body.big-impact .app-title {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(38px, 10vw, 46px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* The listing countdown never wraps: on narrow phones the numeral shrinks instead */
body.big-impact .bi-countdown {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.big-impact .bi-countdown .bi-num {
  white-space: nowrap;
  font-size: clamp(30px, 10.5vw, 44px);
}

/* The ticker waits for the Poster Drop to land, then fades in */
body.big-impact.is-entering .bi-ticker {
  animation: bi-fade 420ms ease-out both;
  animation-delay: calc(2400ms - var(--bi-elapsed));
}

/* While a window ends, its numeral stops breathing and holds the grey */
body.big-impact .app-card.is-ending .bi-ends .bi-num {
  animation: none;
}

/* ---------- Retailer directory ---------- */
.retailer-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.retailer-list li + li {
  border-top: 1px solid var(--line);
}

.retailer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.retailer-link {
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.retailer-link:hover .retailer-name {
  text-decoration: underline;
}

.retailer-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
}

.follow-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.follow-btn[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.follow-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Directory views: chips for how to look, a sort, and a one-line hint */
.retailer-controls {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}

.retailer-controls .chip-row[hidden],
.retailer-controls .app-meta[hidden] {
  display: none;
}

.retailer-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.retailer-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.retailer-sort select {
  min-height: 36px;
  padding: 6px 34px 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310120f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.retailer-live-line {
  color: var(--forest);
}

body.big-impact .retailer-sort {
  color: var(--bi-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.big-impact .retailer-sort select {
  min-height: 34px;
  border: 1.5px solid var(--bi-ink);
  background-color: transparent;
  color: var(--bi-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.big-impact .retailer-live-line {
  color: var(--bi-ink);
  font-weight: 700;
}

@media (max-width: 640px) {
  .retailer-sort select {
    min-height: 44px;
  }
}

.retailer-detail .app-facts {
  margin-top: 12px;
}

/* Account status timeline */
.timeline {
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 4px 0 14px 26px;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 5px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
}

.timeline li::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -2px;
  left: 11px;
  width: 2px;
  background: var(--line);
}

.timeline li:last-child::after {
  display: none;
}

.timeline li.is-done::before {
  border-color: var(--ink);
  background: var(--ink);
}

.timeline li.is-now::before {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.timeline li.is-warn::before {
  border-color: #9a2f2f;
  background: #9a2f2f;
}

.timeline li strong {
  font-weight: 600;
}

/* Recent activity and alert history */
.activity-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.activity-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
}

.activity-list li + li {
  border-top: 1px solid var(--line);
}

.activity-list li > .app-meta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.activity-list a {
  color: inherit;
}

.settings-editor fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-editor legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}

/* ---------- Poster feed: every live window is a post ---------- */

body.big-impact .app-card.bi-post {
  gap: 10px;
  padding: 12px 12px 12px;
}

body.big-impact .bi-post-head {
  align-items: flex-start;
  min-height: 38px;
}

body.big-impact .bi-post-head .app-retailer {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 8px;
  font-size: 0.82rem;
}

body.big-impact .bi-post-head .app-pill {
  flex: none;
  margin-top: 6px;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.bi-post-who {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

a.bi-post-who:hover .bi-post-name,
a.bi-post-who:focus-visible .bi-post-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bi-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bi-row);
  color: var(--bi-ink);
  font-family: var(--font-poster);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.bi-avatar.is-followed {
  background: var(--bi-black);
  color: var(--bi-green);
}

.bi-avatar.is-big {
  width: 64px;
  height: 64px;
  border: 2px solid var(--bi-green);
  background: var(--bi-ink);
  color: var(--bi-green);
  font-size: 24px;
}

.bi-post-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bi-post-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
}

/* The name is its own span so a long one ends in an ellipsis and keeps the check beside it. */
.bi-post-name > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bi-post-name svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--bi-green);
}

.bi-post-sub {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--bi-muted);
}

.bi-post-ends [data-countdown] {
  font-variant-numeric: tabular-nums;
}

/* The poster itself */

.bi-poster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.bi-poster.is-black {
  background: var(--bi-black);
  color: #fff;
}

.bi-poster.is-green {
  background: var(--bi-green);
  color: var(--bi-on-green);
}

.bi-poster.is-paper {
  border-color: var(--bi-line);
  background: var(--bi-bg);
  color: var(--bi-ink);
}

.bi-poster-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 16px;
}

.bi-poster .bi-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bi-poster .bi-post-ends {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.big-impact .app-card .bi-poster h3 {
  color: inherit;
}

body.big-impact .app-card .bi-poster .app-meta {
  color: inherit;
}

.bi-poster .bi-price .bi-num {
  font-size: 64px;
  color: inherit;
}

.bi-poster .bi-price .bi-num.is-text {
  font-size: 36px;
}

.bi-poster .bi-price .bi-off {
  font-size: 24px;
}

.bi-poster.is-black .bi-eyebrow,
.bi-poster.is-black .app-meta {
  color: var(--bi-dark-muted);
}

.bi-poster.is-black .app-meta {
  color: var(--bi-dark-text);
}

.bi-poster.is-black .bi-price .bi-off,
.bi-poster.is-black .bi-post-ends {
  color: var(--bi-green);
}

.bi-poster.is-green .bi-eyebrow,
.bi-poster.is-green .bi-price .bi-off,
.bi-poster.is-green .app-meta,
.bi-poster.is-green .bi-post-ends {
  color: rgba(7, 16, 4, 0.72);
}

.bi-poster.is-paper .bi-eyebrow,
.bi-poster.is-paper .app-meta {
  color: var(--bi-muted);
}

.bi-poster.is-paper .bi-price .bi-off {
  color: var(--bi-muted);
}

.bi-poster.is-paper .bi-post-ends {
  color: #3f7a17;
}

/* Save · Alert · Share · Visit retailer */

body.big-impact .bi-post-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 0;
}

body.big-impact .bi-post-actions .bi-save,
.bi-icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid var(--bi-line);
  border-radius: 10px;
  background: #fff;
  color: var(--bi-ink);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.bi-icon-btn svg {
  width: 22px;
  height: 22px;
}

.bi-icon-btn:hover,
.bi-icon-btn:focus-visible {
  border-color: var(--bi-ink);
}

.bi-icon-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.bi-alert[aria-pressed="true"] {
  border-color: var(--bi-green);
  background: rgba(99, 181, 40, 0.18);
  color: var(--bi-green);
}

.bi-visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  margin-left: auto;
  padding: 6px 14px;
  border: 1.5px solid var(--bi-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--bi-ink);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.bi-visit + .bi-visit {
  margin-left: 0;
}

.bi-visit svg {
  width: 14px;
  height: 14px;
}

.bi-visit:hover,
.bi-visit:focus-visible {
  background: var(--bi-row);
}

.bi-visit.is-primary {
  background: var(--bi-ink);
  color: #fff;
}

.bi-visit.is-primary:hover,
.bi-visit.is-primary:focus-visible {
  background: var(--bi-black);
}

/* ---------- Retailer profile ---------- */

/* Beats body.big-impact .app-detail header, which paints listing headers green. */
body.big-impact .bi-profile .bi-profile-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 18px;
  border-radius: 14px;
  background: var(--bi-black);
  color: #fff;
}

.bi-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bi-profile-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--bi-dark-muted);
}

.bi-profile-kind svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--bi-green);
}

.bi-profile-share {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--bi-dark-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.bi-profile-share svg {
  width: 18px;
  height: 18px;
}

.bi-profile-share:hover,
.bi-profile-share:focus-visible {
  color: #fff;
}

.bi-profile-id {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.big-impact .bi-profile-hero h2 {
  margin: 0;
  font-family: var(--font-poster);
  font-size: 30px;
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #fff;
}

.bi-profile-stats {
  margin: 0;
  font-size: 0.78rem;
  color: var(--bi-dark-text);
}

.bi-profile-stats strong {
  color: #fff;
}

.bi-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bi-profile-actions .follow-btn {
  flex: 1 1 auto;
  min-height: 44px;
  border: 1.5px solid var(--bi-green);
  border-radius: 8px;
  background: var(--bi-green);
  color: var(--bi-on-green);
  font-size: 0.86rem;
  font-weight: 700;
}

.bi-profile-actions .follow-btn[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
}

.bi-profile-site {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  color: #fff;
}

.bi-profile-site svg {
  width: 18px;
  height: 18px;
}

.bi-profile-site:hover,
.bi-profile-site:focus-visible {
  border-color: #fff;
}

body.big-impact .bi-profile-tabs {
  margin: 12px 0 4px;
}

body.big-impact .bi-profile .app-subsection {
  margin-top: 6px;
}