/* Sponsor offer sheet — the guest-facing reward hand-off.
 *
 * Rises from the bottom edge over the athlete's app. Colours are re-asserted
 * at id specificity because the host app forces both text and background on
 * every element under its dark themes.
 */

.nsto {
    --o-ink: #0b0b0c;
    --o-body: #3d3d42;
    --o-mute: #8a8a91;
    --o-faint: #b4b4ba;
    --o-paper: #ffffff;
    --o-wash: #f4f4f5;
    --o-line: #e8e8ea;

    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: none;
}

.nsto.is-open { display: block; }

.nsto__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.nsto__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--o-paper);
    border-radius: 20px 20px 0 0;
    padding: 10px 22px calc(28px + env(safe-area-inset-bottom));
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--o-ink);
    animation: nsto-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes nsto-rise {
    from { transform: translateY(14%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.nsto__grip {
    width: 38px;
    height: 4px;
    border-radius: 100px;
    background: var(--o-line);
    margin: 0 auto 16px;
}

.nsto *,
.nsto *::before,
.nsto *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.nsto button {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    background-image: none;
    font: inherit;
    margin: 0;
    border: 0;
    cursor: pointer;
}

/* ---- header ---- */

.nsto__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
}

.nsto__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.nsto__logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 100px;
    background: var(--o-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.nsto__sponsor {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.nsto__rule { width: 1px; height: 15px; background: var(--o-line); flex: 0 0 1px; }

.nsto__official {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--o-mute);
    white-space: nowrap;
}

/* 44px. This is a guest's only way out of the sheet, and it sits in the
   corner a thumb reaches for least accurately. The circle stays 32px; the
   tappable box around it is what grew. */
.nsto__close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background-clip: content-box;
    padding: 6px;
    border-radius: 100px;
    background: var(--o-wash);
    font-size: 18px;
    line-height: 1;
    color: var(--o-body);
}

/* ---- the offer ---- */

.nsto__offer { padding-bottom: 22px; }

.nsto__headline {
    font-family: 'Barlow Condensed', 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 0.96;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.nsto__for {
    font-size: 13.5px;
    color: var(--o-body);
    margin-top: 10px;
}

/* ---- wallet buttons ---- */

/* Side by side. Stacked, Apple sat above Google at a different width and the
   pair read as a first choice and a fallback rather than two ways to do the
   same thing. */
.nsto__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

/* A single button — the retry and close states — spans both columns rather
   than sitting half-width beside nothing. */
.nsto__actions > .nsto__wallet { grid-column: 1 / -1; }

.nsto__wallet {
    width: 100%;
    padding: 16px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nsto__wallet:active { opacity: 0.72; }
.nsto__wallet[disabled] { opacity: 0.5; cursor: default; }

.nsto__held,
.nsto__warn {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--o-body);
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--o-ink);
}

.nsto__soldout {
    font-size: 14px;
    color: var(--o-mute);
    padding: 18px 0;
    text-align: center;
}

/* ---- footer ---- */

.nsto__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--o-line);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--o-mute);
}

.nsto__terms { text-align: right; }

/* "See terms" is 10px of text in a footer. Padded to a real target and
   pulled back out so the footer row keeps its height. */
.nsto__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: transparent;
    padding: 0 6px;
    margin: -14px -6px;
    font: inherit;
    color: var(--o-mute);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nsto__termsbody {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--o-body);
}

.nsto__empty {
    padding: 40px 0;
    text-align: center;
    color: var(--o-mute);
    font-size: 13.5px;
}

body.nsto-locked { overflow: hidden; }

/* ---- theme defence ----
   The host app forces white text and a dark background onto everything under
   its dark themes; both are re-asserted here at id specificity. */

#nst-offer-sheet,
#nst-offer-sheet * {
    color: var(--o-ink) !important;
    -webkit-text-fill-color: var(--o-ink) !important;
    background-color: transparent !important;
}

#nst-offer-sheet .nsto__panel { background-color: var(--o-paper) !important; }
#nst-offer-sheet .nsto__scrim { background-color: rgba(0, 0, 0, 0.42) !important; }

#nst-offer-sheet .nsto__logo,
#nst-offer-sheet .nsto__close,
#nst-offer-sheet .nsto__grip,
#nst-offer-sheet .nsto__rule { background-color: var(--o-line) !important; }

#nst-offer-sheet .nsto__official,
#nst-offer-sheet .nsto__foot,
#nst-offer-sheet .nsto__foot *,
#nst-offer-sheet .nsto__soldout,
#nst-offer-sheet .nsto__empty {
    color: var(--o-mute) !important;
    -webkit-text-fill-color: var(--o-mute) !important;
}

#nst-offer-sheet .nsto__for,
#nst-offer-sheet .nsto__held,
#nst-offer-sheet .nsto__warn,
#nst-offer-sheet .nsto__termsbody {
    color: var(--o-body) !important;
    -webkit-text-fill-color: var(--o-body) !important;
}

/* The sponsor's own mark, when one has been added. */
.nsto__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nst-offer-sheet .nsto__logo img { background-color: transparent !important; }

/* ---- hero ----
   The product shot sits beside the headline rather than above it, so the
   offer still leads and the sheet stays short enough to act on. */
.nsto__offer.has-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
}

.nsto__offer-copy { flex: 1; min-width: 0; }

.nsto__hero {
    flex: 0 0 42%;
    max-width: 190px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.nsto__hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.nsto__offer.has-hero .nsto__headline { font-size: 33px; }

/* ---- button icons ---- */

.nsto__wallet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* ---- counter ---- */

.nsto__left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d23b32;
}

.nsto__cicon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: #d23b32;
}

#nst-offer-sheet .nsto__left,
#nst-offer-sheet .nsto__cicon {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}

#nst-offer-sheet .nsto__hero img { background-color: transparent !important; }

/* The blanket ink rule above also catches the label and glyph inside the
   dark Apple button, which paints them black on black. Restate both. */


/* ---- marker marks ----
   Hand-drawn red annotations, positioned against the copy and the hero the
   way a marker would land on a printed poster. */
.nsto__mk { position: absolute; pointer-events: none; }

.nsto__offer-copy { position: relative; }

.nsto__mk--underline {
    position: relative;
    display: block;
    width: 72%;
    height: 12px;
    margin: 2px 0 6px;
}

.nsto__hero { position: relative; }

.nsto__mk--arrow {
    width: 54px;
    height: 36px;
    left: -34px;
    top: 42%;
    z-index: 2;
}

.nsto__mk--crown {
    width: 26px;
    height: 16px;
    right: 13%;
    top: -12px;
    z-index: 2;
}

.nsto__mk--ticks {
    width: 20px;
    height: 18px;
    right: 31%;
    top: 4%;
    z-index: 2;
}

/* ---- Apple's badge ----
   Apple's guidelines say the badge is used as supplied: not restyled, not
   relabelled, and at its own proportions. So it stands alone rather than
   sitting inside a button with our own wording. */
.nsto__badge {
    width: 100%;
    padding: 0;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nsto__badge img {
    /* Natural proportions, never stretched. Google renders at full height;
       Apple at 89% of it, which is where the two wordmarks measure the same —
       70px against 60px in their own artboards is the difference being
       corrected. The badges end up different widths, which is what they are. */
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform: none;
    border-radius: 0;
}

/* Both at full height. Apple's wordmark is drawn larger inside its own
   artboard than Google's, so the two are never identical — but these are
   vendor badges meant to be used as supplied, and Apple and Google both show
   them side by side at matching heights in their own guidelines. Scaling one
   to chase the other only traded a type mismatch for a shape mismatch. */

/* Apple's artboard is proportionally taller than Google's — 110x34 against
   199x55 — so at the same button height its wordmark renders noticeably
   bigger. Scaled to 0.895 the two read as the same size, which is what the
   eye actually compares. Nothing is cropped; the artwork scales whole inside
   a button that keeps its own dimensions. */


/* The button's own black is the pill for both. Apple's artwork sits inside
   it at a smaller size; without this the shrunken badge would float on a
   larger black rectangle. */


.nsto__badge--google img {
    max-width: none;
    border-radius: 0;
    transform: scale(1);
}

.nsto__badge-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

#nst-offer-sheet .nsto__badge { background-color: transparent !important; }
#nst-offer-sheet .nsto__badge img { background-color: transparent !important; }
#nst-offer-sheet .nsto__badge-busy {
    background-color: rgba(0, 0, 0, 0.72) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---- SVG defence ----
   The blanket ink rule above sets `color` on every element, which drags any
   path drawn with currentColor to black — the clock turns into a filled dot
   and Apple's badge loses its own artwork. SVGs opt out and state their own
   paint instead. */
#nst-offer-sheet svg,
#nst-offer-sheet svg * {
    background-color: transparent !important;
}

#nst-offer-sheet .nsto__badge img,
#nst-offer-sheet .nsto__badge svg,
#nst-offer-sheet .nsto__badge svg * {
    /* Apple's badge is supplied artwork: nothing here may repaint it. */
    fill: revert-layer !important;
    stroke: revert-layer !important;
    color: revert-layer !important;
}

/* The marker marks and the clock carry their own red. */
#nst-offer-sheet .nsto__mk path {
    stroke: #c8322b !important;
    fill: none !important;
}

#nst-offer-sheet .nsto__cicon,
#nst-offer-sheet .nsto__cicon * {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}

#nst-offer-sheet .nsto__cicon circle,
#nst-offer-sheet .nsto__cicon path {
    stroke: #d23b32 !important;
    fill: none !important;
}

/* ---- after the hand-off ----
   The pass leaves through a hidden iframe, so the sheet stays put and has to
   say what happened. Three states: handed over, confirmed, or unsure. */
.nsto__done {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0 18px;
}

.nsto__done-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.nsto__done-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--o-body);
    margin-top: 4px;
}

.nsto__tick {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 100px;
    background: var(--o-ink);
    position: relative;
    margin-top: 2px;
}

/* The check is two borders on a rotated box — no glyph to be recoloured. */
.nsto__tick::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--o-paper);
    border-bottom: 2px solid var(--o-paper);
    transform: rotate(45deg);
}

.nsto__spin {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 4px;
    border-radius: 100px;
    border: 2px solid var(--o-line);
    border-top-color: var(--o-ink);
    animation: nsto-spin 800ms linear infinite;
}

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

.nsto__wallet--quiet {
    background: var(--o-wash);
    color: var(--o-ink);
    font-size: 14px;
}

#nst-offer-sheet .nsto__tick { background-color: var(--o-ink) !important; }
#nst-offer-sheet .nsto__spin { background-color: transparent !important; }
#nst-offer-sheet .nsto__wallet--quiet {
    background-color: var(--o-wash) !important;
    color: var(--o-ink) !important;
    -webkit-text-fill-color: var(--o-ink) !important;
}
#nst-offer-sheet .nsto__done-note {
    color: var(--o-body) !important;
    -webkit-text-fill-color: var(--o-body) !important;
}

/* The countdown on a held code. Tabular figures so the number does not
   jitter as the digits change, and the same red as the codes-left counter
   because both are saying the same thing: this does not wait forever. */
.nsto__hold-clock {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: #d23b32;
}

#nst-offer-sheet .nsto__hold-clock {
    color: #d23b32 !important;
    -webkit-text-fill-color: #d23b32 !important;
}