/* The app's header pill on the desktop pages (header-pill.js).

   The Fiabaen design's claim chip: a 44px rounded chip beside the identity
   pill -- the sponsor's mark in a circle, the offer in bold, and a Claim
   badge. White with a hairline in the light theme, near-black in the dark
   one; the badge is the inverse of the chip. It shrinks before anything else
   in the header does, so a header never wraps for it: the label ellipsises
   and the chip gives way to the page's own controls. */

.hp-pill {
  --hp-bg: #ffffff;
  --hp-edge: #e6e6e6;
  --hp-hover: #0e0e0e;
  --hp-ink: #0e0e0e;
  --hp-cta-bg: #0e0e0e;
  --hp-cta-ink: #ffffff;
  --hp-mark: #0e0e0e;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 380px;
  height: 44px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 22px;
  border: 1.5px solid var(--hp-edge);
  background: var(--hp-bg);
  color: var(--hp-ink);
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-stretch: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.hp-pill:hover { border-color: var(--hp-hover); }
.hp-pill:focus-visible { outline: 2px solid var(--hp-hover); outline-offset: 2px; }
:root[data-theme="dark"] .hp-pill {
  --hp-bg: #18181b;
  --hp-edge: #2a2a2e;
  --hp-hover: #ffffff;
  --hp-ink: #ffffff;
  --hp-cta-bg: #ffffff;
  --hp-cta-ink: #0e0e0e;
  --hp-mark: #3a3a40;
}
/* Announcements and the like have no mark: a dot and the line, as on the phone. */
.hp-pill:not(.hp-pill--offer) { padding: 0 6px 0 16px; }
.hp-pill:not(.hp-pill--offer):not(:has(.hp-pill__cta)) { padding-right: 16px; }

.hp-pill__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hp-mark);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}
.hp-pill__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-pill__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--hl, #0e0e0e); }
:root[data-theme="dark"] .hp-pill__dot { background: #ffffff; }
.hp-pill__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}
.hp-pill__cta {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 15px;
  background: var(--hp-cta-bg);
  color: var(--hp-cta-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* A campaign pill (a sponsor offer) is the phone's campaign pill, not a
   desktop chip: the 40px glass capsule the phone rides on its hero photo
   (mobile-app-header / mobile-import-library-hero) -- white copy at 12.5px
   800, the sponsor's mark on a white 26px disc, and "CLAIM OFFER" in 900
   caps with a drawn chevron. A desktop header has no photo behind it, so the
   glass is given the dark it sits on over the phone's photo. The same in
   every theme and page colour, as it is on the phone. */
.hp-pill.hp-pill--offer {
  gap: 7px;
  height: 40px;
  max-width: 380px;
  padding: 0 14px 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #16161c;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 30px -18px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
.hp-pill.hp-pill--offer:hover { border-color: rgba(255, 255, 255, 0.6); }
.hp-pill.hp-pill--offer:focus-visible { outline: 2px solid #16161c; outline-offset: 2px; }
:root[data-theme="dark"] .hp-pill.hp-pill--offer:focus-visible { outline-color: #ffffff; }
.hp-pill--offer .hp-pill__mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: rgba(255, 255, 255, 0.92);
  color: #16161c;
  -webkit-text-fill-color: #16161c;
  font-size: 11px;
  font-weight: 800;
}
.hp-pill--offer .hp-pill__label {
  flex: 1 1 auto;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.hp-pill--offer .hp-pill__cta--phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.hp-pill--offer .hp-pill__cta--phone::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Media's bar carries the channel chips: the pill sits before them and the
   chips take what is left (they already scroll sideways). */
.tv-bar .hp-pill { flex: 0 0 auto; max-width: 380px; }
.tv-bar { flex-wrap: nowrap; }

/* Headers that wrap their right-hand cluster keep one line with a pill in it:
   the pill yields first. */
@media (min-width: 761px) {
  .has-hp-pill .bk-top,
  .has-hp-pill .sh-top,
  .has-hp-pill .st-top,
  .has-hp-pill .mp-top,
  .has-hp-pill .cm-top,
  .has-hp-pill .mk-bar,
  .has-hp-pill .yu-top,
  .has-hp-pill .cp-top { flex-wrap: nowrap; }
  .has-hp-pill .bk-top__right,
  .has-hp-pill .sh-top__right,
  .has-hp-pill .st-top__right,
  .has-hp-pill .mp-top__right,
  .has-hp-pill .cm-top__right { flex-wrap: nowrap; flex-shrink: 0; }
}

/* Split View: a pane is half a screen, so the pill yields to the pane's own
   controls and its line ellipsises. */
[data-layout="split"] .ws-pane .hp-pill,
[data-layout="split"] .ws-pane .tv-bar .hp-pill { flex: 0 1 230px; min-width: 64px; max-width: 230px; padding-right: 12px; }
[data-layout="split"] .ws-pane .hp-pill__cta--phone { font-size: 0; gap: 0; letter-spacing: 0; }

@media (max-width: 1100px) {
  .hp-pill, .tv-bar .hp-pill { max-width: 260px; }
}
@media (max-width: 760px) {
  .hp-pill__label { display: none; }
  .hp-pill { padding-right: 6px; }
}

/* The phone's offer sheet, opened from a desktop page: a centred card rather
   than a full-width sheet rising from the bottom edge. */
.hp-desk #nst-offer-sheet .nsto__panel {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border-radius: 22px;
  padding: 18px 24px 26px;
  transform: translate(-50%, -50%);
  animation: hp-sheet-in 0.18s ease;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.hp-desk #nst-offer-sheet .nsto__grip { display: none; }
@keyframes hp-sheet-in { from { opacity: 0; } to { opacity: 1; } }