/**
 * /partner-dashboard/ (3.42.3). The public Predictive Safety kit: light paper,
 * kit cards, brand yellow buttons with black text, Bebas for the few
 * headings, Nunito Sans for text, mono only for codes and money. Tokens come
 * only from the theme's kit.css (enqueued as this sheet's dependency): no hex
 * or rgba literals, no Obsidian tokens.
 *
 * Every rule is scoped under .sst-partner. Most are written ".sst-partner
 * .sst-partner__x" (two classes) so they beat the kit's element rules (h1-h3
 * in Bebas, uppercase, black; p at 68ch; a inherits colour) without
 * !important. Tap targets: 44px for buttons and links, 48px for fold headers.
 *
 * Contrast on --paper (white) / --card (light grey), AA:
 *   --ink 15.7 / 14.3, --muted 7.3 / 6.6, --err 5.6 / 5.1, --warn-ink 8.1 / 7.3,
 *   --success 5.4 / 4.9, black on --yellow 13.2, --ok-ink on --ok-bg 7.4,
 *   --warn-ink on --warn-bg 7.3; input borders --muted 7.3 / 6.6 (3:1 needed).
 */

/* The kit's content column is left-aligned at 76ch; centre it on this page only. */
.kit-content:has(> #sst-partner) {
    max-width: none;
}

.sst-partner {
    box-sizing: border-box;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.sst-partner *,
.sst-partner *::before,
.sst-partner *::after {
    box-sizing: border-box;
}

/* The page switches blocks on and off without a reload */
.sst-partner [hidden] {
    display: none !important;
}

.sst-partner p {
    max-width: none;
}

.sst-partner a {
    color: var(--ink);
}

/* Screen-reader only: the live region, legends, ", done" */
.sst-partner .sst-partner__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.sst-partner .sst-partner__head {
    margin: 0 0 24px;
}

.sst-partner .sst-partner__head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.sst-partner .sst-partner__title {
    margin: 0;
    max-width: none;
    font-family: var(--font-display);
    font-size: clamp(40px, 8vw, 56px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--black);
}

.sst-partner .sst-partner__help-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* 3.45.0 hero: the deal as two stats under "Hi". Side by side when there
   is room, stacked on a phone. The one bold move on the page: the numbers in
   the display face, "You get" yellow on black (13.2:1). */
.sst-partner .sst-partner__deal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    max-width: 720px;
    margin: 16px 0 0;
}

.sst-partner .sst-partner__stat {
    display: flex;
    flex: 1 1 240px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--r-tile);
    background: var(--card);
}

.sst-partner .sst-partner__stat-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.sst-partner .sst-partner__stat-num {
    font-family: var(--font-display);
    font-size: clamp(52px, 13vw, 76px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--black);
}

.sst-partner .sst-partner__stat--you {
    background: var(--black);
}

/* Earned so far: green only once money is owed or paid (the template sets data-earned) */
.sst-partner .sst-partner__stat--earned[data-earned="1"] {
    background: var(--ok-bg);
}

.sst-partner .sst-partner__stat--earned[data-earned="1"] .sst-partner__stat-label,
.sst-partner .sst-partner__stat--earned[data-earned="1"] .sst-partner__stat-num {
    color: var(--ok-ink);
}

.sst-partner .sst-partner__stat--you .sst-partner__stat-label {
    color: var(--paper);
}

.sst-partner .sst-partner__stat--you .sst-partner__stat-num {
    color: var(--yellow);
}

.sst-partner .sst-partner__deal-foot {
    flex: 1 0 100%;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

.sst-partner .sst-partner__lead {
    margin: 8px 0 20px;
    font-size: 17px;
    color: var(--ink);
}

/* ── Cards and headings ───────────────────────────────────────────────── */

.sst-partner .sst-partner__section,
.sst-partner .sst-partner__next {
    margin: 0 0 16px;
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    background: var(--card);
}

/* Next step: the same card with the brand yellow along the top, one sentence, one button */
.sst-partner .sst-partner__next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    border-top: 6px solid var(--yellow);
}

.sst-partner .sst-partner__next[hidden] {
    display: none;
}

.sst-partner .sst-partner__next p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.sst-partner .sst-partner__h2 {
    margin: 0 0 16px;
    max-width: none;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--black);
}

.sst-partner .sst-partner__h3 {
    margin: 24px 0 8px;
    max-width: none;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.sst-partner .sst-partner__h2 + .sst-partner__h3 {
    margin-top: 0;
}

/* ── Text ─────────────────────────────────────────────────────────────── */

.sst-partner .sst-partner__label {
    display: block;
    margin: 20px 0 6px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.sst-partner .sst-partner__hint,
.sst-partner .sst-partner__help,
.sst-partner .sst-partner__note,
.sst-partner .sst-partner__empty {
    margin: 4px 0 12px;
    font-size: 15px;
    color: var(--muted);
}

.sst-partner .sst-partner__help {
    color: var(--ink);
}

.sst-partner .sst-partner__help--warn,
.sst-partner .sst-partner__item-sub--warn {
    color: var(--warn-ink);
    font-weight: 700;
}

.sst-partner .sst-partner__status {
    min-height: 1.5em;
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--muted);
}

.sst-partner .sst-partner__status--bad,
.sst-partner .sst-partner__field-error {
    color: var(--err);
    font-weight: 700;
}

.sst-partner .sst-partner__status--good {
    color: var(--success);
    font-weight: 700;
}

.sst-partner .sst-partner__field-error {
    margin: 6px 0 0;
    font-size: 15px;
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.sst-partner .sst-partner__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sst-partner .sst-partner__row > .sst-partner__input {
    flex: 1 1 200px;
    min-width: 0;
}

.sst-partner .sst-partner__input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 2px solid var(--muted);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 16px; /* no iOS zoom */
}

.sst-partner textarea.sst-partner__input {
    min-height: 96px;
    resize: vertical;
}

/* The crew message sizes itself to its text (JS), so no scrollbar and no cut-off link */
.sst-partner textarea[data-crew] {
    overflow: hidden;
}

.sst-partner .sst-partner__input[aria-invalid="true"] {
    border-color: var(--err);
}

.sst-partner .sst-partner__input:focus {
    outline: 3px solid var(--worker);
    outline-offset: 1px;
}

.sst-partner .sst-partner__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sst-partner .sst-partner__fieldset > legend {
    float: left;
    width: 100%;
}

.sst-partner .sst-partner__fieldset > legend + * {
    clear: both;
}

.sst-partner .sst-partner__fieldset[disabled] .sst-partner__input {
    opacity: 0.6;
}

/* 3.45.0: the readout, then "Give your crew more" (a plain fold, not a
   section fold) holding the extra-off slider. The range's whole row is the
   hit area: 44px tall, the thumb drawn by the browser in the kit's black. */
.sst-partner .sst-partner__readout {
    display: block;
    margin: 16px 0 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums; /* the numbers change in place; nothing jiggles */
    transition: color 160ms ease;       /* the one motion: into amber and back */
}

.sst-partner .sst-partner__more {
    margin: 8px 0 0;
}

.sst-partner .sst-partner__more-sum {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
}

.sst-partner .sst-partner__more-sum:focus-visible {
    outline: 3px solid var(--paper);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--black);
}

/* The slider: a neutral track, the extra in brand yellow (a span sized by the
   JS to the thumb's centre), a 28px yellow thumb ringed in black. */
.sst-partner .sst-partner__range-wrap {
    position: relative;
    display: block;
}

.sst-partner .sst-partner__range-wrap::before,
.sst-partner .sst-partner__range-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    border-radius: 4px;
    transform: translateY(-50%);
}

.sst-partner .sst-partner__range-wrap::before {
    content: "";
    right: 0;
    background: var(--gray-a6);
}

.sst-partner .sst-partner__range-fill {
    width: 14px;
    background: var(--yellow);
}

.sst-partner .sst-partner__range {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.sst-partner .sst-partner__range::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
}

.sst-partner .sst-partner__range::-moz-range-track {
    height: 8px;
    background: transparent;
}

.sst-partner .sst-partner__range::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border: 3px solid var(--black);
    border-radius: 50%;
    background: var(--yellow);
    -webkit-appearance: none;
    appearance: none;
}

.sst-partner .sst-partner__range::-moz-range-thumb {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 3px solid var(--black);
    border-radius: 50%;
    background: var(--yellow);
}

.sst-partner .sst-partner__range:focus-visible {
    outline: 3px solid var(--worker);
    outline-offset: 2px;
}

.sst-partner .sst-partner__range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.sst-partner .sst-partner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 7.5em; /* "Copied" never shifts the row */
    padding: 10px 18px;
    border: 2px solid var(--black);
    border-radius: 0;
    background: var(--paper);
    color: var(--black);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.sst-partner .sst-partner__btn--primary {
    background: var(--yellow);
    color: var(--black);
}

.sst-partner .sst-partner__form > .sst-partner__btn--primary,
.sst-partner .sst-partner__fieldset > .sst-partner__btn--primary,
.sst-partner .sst-partner__notice > .sst-partner__btn--primary {
    margin-top: 16px;
}

.sst-partner .sst-partner__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* The kit's focus ring (white then black) reads on paper and on yellow */
.sst-partner .sst-partner__btn:focus-visible,
.sst-partner .sst-partner__help-link:focus-visible,
.sst-partner .sst-partner__step-link:focus-visible,
.sst-partner .sst-partner__fold-sum:focus-visible,
.sst-partner .sst-partner__note:focus {
    outline: 3px solid var(--paper);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--black);
}

/* "Text it" opens the messages app: touch devices only, touch laptops included. Copy stays everywhere. */
.sst-partner .sst-partner__touch-only {
    display: none;
}

@media (pointer: coarse), (any-pointer: coarse) {
    .sst-partner .sst-partner__touch-only {
        display: inline-flex;
    }
}

.sst-partner .sst-partner__step-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* ── Figures and lists ────────────────────────────────────────────────── */

.sst-partner .sst-partner__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 16px;
}

.sst-partner .sst-partner__figure {
    margin: 0;
}

.sst-partner .sst-partner__figure dt {
    font-size: 15px;
    color: var(--muted);
}

.sst-partner .sst-partner__figure dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--black);
}

.sst-partner .sst-partner__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sst-partner .sst-partner__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}

.sst-partner .sst-partner__item:last-child {
    border-bottom: 0;
}

.sst-partner .sst-partner__item-main {
    flex: 1 1 200px;
    min-width: 0;
}

.sst-partner .sst-partner__item-side {
    text-align: right;
}

.sst-partner .sst-partner__item-side .sst-partner__btn {
    margin-left: 8px;
}

.sst-partner .sst-partner__item-sub {
    display: block;
    font-size: 15px;
    color: var(--muted);
}

.sst-partner .sst-partner__code {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--black);
}

/* A code's short link (sst.nyc/BEN-5) on its own line under the row */
.sst-partner .sst-partner__item-link {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* A referral row's right side: what you earn over its state */
.sst-partner .sst-partner__earn {
    display: block;
    font-family: var(--mono);
    font-weight: 700;
}

.sst-partner .sst-partner__chip {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--muted);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.sst-partner .sst-partner__chip--paid {
    border-color: var(--ok-line);
    background: var(--ok-bg);
    color: var(--ok-ink);
}

/* 3.44.0: earned, waiting for Friday: the paid colour as an outline only. Pending keeps the plain chip. */
.sst-partner .sst-partner__chip--owed {
    border-color: var(--ok-line);
    color: var(--ok-ink);
}

.sst-partner .sst-partner__chip--on_hold {
    border-color: var(--warn-ink);
    background: var(--warn-bg);
    color: var(--warn-ink);
}

/* Text your crew: one ready message per code */
.sst-partner .sst-partner__crew {
    margin-bottom: 20px;
}

.sst-partner .sst-partner__crew .sst-partner__row {
    margin-top: 8px;
}

/* ── Folds: one header style everywhere ───────────────────────────────── */

.sst-partner .sst-partner__fold {
    margin-top: 16px;
    border-top: 1px solid var(--rule);
}

.sst-partner .sst-partner__section > .sst-partner__fold:first-child {
    margin-top: 0;
    border-top: 0;
}

.sst-partner .sst-partner__fold-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 8px 0;
    cursor: pointer;
    list-style: none;
}

.sst-partner .sst-partner__fold-sum::-webkit-details-marker {
    display: none;
}

.sst-partner .sst-partner__fold-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sst-partner .sst-partner__fold-title {
    margin: 0;
    max-width: none;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.sst-partner .sst-partner__fold-note {
    font-size: 15px;
    color: var(--muted);
}

.sst-partner .sst-partner__fold-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.sst-partner .sst-partner__fold-hide,
.sst-partner .sst-partner__fold[open] > .sst-partner__fold-sum .sst-partner__fold-show {
    display: none;
}

.sst-partner .sst-partner__fold[open] > .sst-partner__fold-sum .sst-partner__fold-hide {
    display: inline;
}

.sst-partner .sst-partner__chev {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-25%);
}

.sst-partner .sst-partner__fold[open] > .sst-partner__fold-sum .sst-partner__chev {
    transform: rotate(-135deg) translateY(-25%);
}

/* ── Help ─────────────────────────────────────────────────────────────── */

.sst-partner .sst-partner__faq {
    margin: 0;
}

.sst-partner .sst-partner__faq dt {
    margin-top: 20px;
    font-weight: 700;
}

.sst-partner .sst-partner__faq dd {
    margin: 4px 0 0;
    color: var(--ink);
}

/* ── Desktop (3.45.0): two columns from 960px; below it nothing changes ── */

@media (min-width: 960px) {
    .sst-partner {
        max-width: 1120px;
    }

    .sst-partner .sst-partner__cols {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
        grid-template-areas: "main side";
        gap: 0 24px;
        align-items: start;
    }

    .sst-partner .sst-partner__col--main {
        grid-area: main;
        min-width: 0;
    }

    .sst-partner .sst-partner__col--side {
        grid-area: side;
        min-width: 0;
    }

    /* One 24px gutter both ways, so the columns read as a grid, not two stacks */
    .sst-partner .sst-partner__cols .sst-partner__section,
    .sst-partner .sst-partner__next {
        margin-bottom: 24px;
    }

    .sst-partner .sst-partner__section p {
        max-width: 68ch;
    }

    .sst-partner .sst-partner__figures {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }

    /* No code yet: My codes is [hidden] (data-after-code), so one narrow column */
    .sst-partner:has(#sst-partner-codes[hidden]) {
        max-width: 720px;
    }

    .sst-partner:has(#sst-partner-codes[hidden]) .sst-partner__cols {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sst-partner .sst-partner__readout {
        transition: none;
    }
}

/* ── Partner Terms (3.46.0): the gate and the /partner-terms/ page ───────── */

.sst-partner .sst-partner__terms-list {
    margin: 16px 0;
    padding-left: 1.25em;
}

.sst-partner .sst-partner__terms-list li {
    max-width: none;
    margin: 0 0 8px;
}

.sst-partner .sst-partner__terms-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    margin-top: 8px;
    font-weight: 700;
    cursor: pointer;
}

.sst-partner .sst-partner__terms-agree input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--black);
}

.sst-partner .sst-partner__terms-form > .sst-partner__btn--primary {
    margin-top: 12px;
}

.sst-partner .sst-partner__terms-h {
    margin: 24px 0 8px;
}

.sst-partner .sst-partner__terms-p {
    max-width: none;
    margin: 0 0 10px;
}

.sst-partner .sst-partner__terms-sign {
    margin: 24px 0 0;
    color: var(--muted);
}

/* ── Partner Terms page (3.47.0): short version, then the full agreement ── */

.sst-partner .sst-partner__terms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 16px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.sst-partner .sst-partner__terms-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
}

.sst-partner .sst-partner__terms-part {
    scroll-margin-top: 16px;
}

.sst-partner .sst-partner__terms-part + .sst-partner__terms-part {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

.sst-partner .sst-partner__terms-part-h {
    margin: 16px 0 8px;
    font-family: var(--font-display);
}

.sst-partner .sst-partner__agreement p,
.sst-partner .sst-partner__agreement li {
    max-width: none;
    margin: 0 0 10px;
    color: var(--ink);
    font-family: var(--font-body);
}

.sst-partner .sst-partner__agreement-title {
    margin: 16px 0 4px;
}

.sst-partner .sst-partner__agreement-h {
    margin: 28px 0 8px;
}

.sst-partner .sst-partner__agreement-h3 {
    margin: 20px 0 8px;
}

.sst-partner .sst-partner__agreement-list {
    margin: 0 0 10px;
    padding-left: 1.5em;
    list-style: none;
}

@media (min-width: 960px) {
    .sst-partner .sst-partner__terms-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 0 32px;
        align-items: start;
    }

    .sst-partner .sst-partner__terms-page > .sst-partner__title,
    .sst-partner .sst-partner__terms-page > .sst-partner__lead {
        grid-column: 1 / -1;
    }

    .sst-partner .sst-partner__terms-body {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
    }

    .sst-partner .sst-partner__terms-nav {
        grid-column: 2;
        grid-row: 3;
        position: sticky;
        top: 24px;
        flex-direction: column;
        gap: 0;
        margin: 0;
    }
}