/*
 * CardReactor control language — isolated white/mint pill controls.
 *
 * This layer is deliberately opt-in and surface-scoped. It does not style
 * generic button or anchor elements and it does not own any interaction.
 */

.cr-app-v3-shell,
.cr-public-page {
    --cr-pill-ink: var(--crc-ink, #171b1a);
    --cr-pill-muted: var(--crc-muted, #6f7774);
    --cr-pill-line: var(--crc-line-strong, #cfd8d4);
    --cr-pill-surface: var(--crc-surface, #fff);
    --cr-pill-soft: var(--crc-soft, #eff3f1);
    --cr-pill-accent: var(--crc-mint, #36b990);
    --cr-pill-accent-deep: var(--crc-mint-deep, #148064);
    --cr-pill-accent-soft: var(--crc-mint-soft, #e2f7f0);
    --cr-pill-danger: var(--crc-danger, #d94750);
}

.crn-app {
    --cr-pill-ink: var(--crn-ink, #171b1a);
    --cr-pill-muted: var(--crn-muted, #707875);
    --cr-pill-line: var(--crn-line, #e3e8e6);
    --cr-pill-surface: var(--crn-surface, #fff);
    --cr-pill-soft: var(--crn-canvas, #f6f8f7);
    --cr-pill-accent: var(--crn-mint, #36b990);
    --cr-pill-accent-deep: var(--crn-mint-deep, #148064);
    --cr-pill-accent-soft: var(--crn-mint-soft, #e2f7f0);
    --cr-pill-danger: var(--crn-danger, #db4e54);
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-set {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 6px 15px 6px 8px;
    color: var(--cr-pill-ink);
    background: var(--cr-pill-surface);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(21, 44, 37, .055);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control[data-cr-pill-icon]::before {
    content: attr(data-cr-pill-icon);
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-color: color-mix(in srgb, var(--cr-pill-accent) 34%, transparent);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--cr-pill-accent-deep);
    border-color: var(--cr-pill-accent);
    box-shadow: 0 5px 15px rgba(21, 80, 62, .1);
    transform: translateY(-1px);
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control:focus-visible {
    outline: 3px solid var(--cr-pill-accent);
    outline-offset: 2px;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-color: var(--cr-pill-accent);
    box-shadow: 0 0 0 2px rgba(54, 185, 144, .13);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr-pill-accent) 13%, transparent);
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"])[data-cr-pill-icon]::before {
    color: #fff;
    background: var(--cr-pill-accent-deep);
    border-color: var(--cr-pill-accent-deep);
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control--compact {
    min-height: 34px;
    padding: 4px 12px 4px 6px;
    font-size: 9px;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control--compact[data-cr-pill-icon]::before {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 9px;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control--mint {
    color: #fff;
    background: var(--cr-pill-accent-deep);
    border-color: var(--cr-pill-accent-deep);
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control--mint[data-cr-pill-icon]::before {
    color: var(--cr-pill-accent-deep);
    background: #fff;
    border-color: #fff;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control.is-danger {
    color: var(--cr-pill-danger);
    border-color: var(--cr-pill-danger);
    border-color: color-mix(in srgb, var(--cr-pill-danger) 46%, var(--cr-pill-line));
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control:disabled,
:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .46;
    transform: none;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-status-pill,
:is(.cr-app-v3-shell, .cr-public-page, .crn-app) :is(.cr-app-v3-card-detail-features, .crn-card-tags, .cr-public-dialog-tags) > :is(span, b) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 28px;
    padding: 4px 10px 4px 7px;
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-color: color-mix(in srgb, var(--cr-pill-accent) 28%, var(--cr-pill-line));
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

:is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-status-pill::before,
:is(.cr-app-v3-shell, .cr-public-page, .crn-app) :is(.cr-app-v3-card-detail-features, .crn-card-tags, .cr-public-dialog-tags) > :is(span, b)::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    background: var(--cr-pill-accent);
    border: 2px solid var(--cr-pill-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(54, 185, 144, .42);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cr-pill-accent) 42%, transparent);
}

/* Existing Card Browser controls opt in through precise component selectors. */
.cr-app-v3-shell .cr-app-v3-card-browser-view {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cr-app-v3-shell .cr-app-v3-card-browser-view > .cr-pill-control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-width: 92px;
    min-height: 34px;
    height: auto;
    padding: 4px 12px 4px 6px;
    color: var(--cr-pill-ink);
    background: var(--cr-pill-surface);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(21, 44, 37, .055);
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
}

.cr-app-v3-shell .cr-app-v3-card-browser-view > .cr-pill-control:is(.is-active, [aria-pressed="true"]) {
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-color: var(--cr-pill-accent);
    box-shadow: 0 0 0 2px rgba(54, 185, 144, .13);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr-pill-accent) 13%, transparent);
}

.cr-app-v3-shell :is(.cr-card-browse-create, .cr-app-v3-card-browser-create).cr-pill-control {
    min-height: 40px;
    padding-right: 14px;
}

.cr-app-v3-shell .cr-app-v3-card-record-type.cr-status-pill {
    border-radius: 999px;
}

/* FRONT/BACK controls keep their handlers; only their visual language changes. */
.cr-app-v3-shell .cr-app-v3-card-detail-side-switch.cr-pill-set,
.cr-public-page .cr-app-v3-card-detail-side-switch.cr-pill-set,
.cr-public-page .cr-public-side-toggle.cr-pill-set,
.crn-app .crn-card-stage__tabs.cr-pill-set {
    justify-content: center;
}

.cr-app-v3-shell .cr-app-v3-card-detail-side-switch > .cr-pill-control,
.cr-public-page .cr-app-v3-card-detail-side-switch > .cr-pill-control,
.cr-public-page .cr-public-side-toggle > .cr-pill-control,
.crn-app .crn-card-stage__tabs > .cr-pill-control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 96px;
    min-height: 34px;
    padding: 4px 12px 4px 6px;
    color: var(--cr-pill-ink);
    background: var(--cr-pill-surface);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(21, 44, 37, .055);
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
}

.cr-app-v3-shell .cr-app-v3-card-detail-side-switch > .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"]),
.cr-public-page .cr-app-v3-card-detail-side-switch > .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"]),
.cr-public-page .cr-public-side-toggle > .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"]),
.crn-app .crn-card-stage__tabs > .cr-pill-control:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-color: var(--cr-pill-accent);
    box-shadow: 0 0 0 2px rgba(54, 185, 144, .13);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr-pill-accent) 13%, transparent);
}

/* Detail-rail actions remain two-line capable while using the same outline. */
.cr-app-v3-shell :is(
    .cr-app-v3-card-detail-action-buttons,
    .cr-app-v3-card-detail-context-media > div
) .cr-pill-control,
.cr-app-v3-shell :is(
    .cr-app-v3-card-detail-workflow-link,
    .cr-app-v3-card-detail-context-back,
    .cr-app-v3-card-detail-back
).cr-pill-control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    padding: 6px 15px 6px 8px;
    color: var(--cr-pill-ink);
    background: var(--cr-pill-surface);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(21, 44, 37, .055);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
}

.cr-app-v3-shell .cr-app-v3-card-detail-workflow-link.cr-pill-control--mint {
    color: #fff;
    background: var(--cr-pill-accent-deep);
    border-color: var(--cr-pill-accent-deep);
}

.cr-app-v3-shell .cr-app-v3-card-detail-back.cr-pill-control > span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-radius: 50%;
}

/*
 * Grade selector contract: RAW + PSA 1–10 are always visible. Six columns
 * produce two rows in the detail rail; narrow containers gain more rows.
 */
:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-history {
    container-type: inline-size;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 5px 8px;
    color: var(--cr-pill-muted);
    background: var(--cr-pill-surface);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button::before {
    content: "";
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    background: var(--cr-pill-soft);
    border-width: 1px;
    border-style: solid;
    border-color: var(--cr-pill-line);
    border-radius: 50%;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button:is(.is-active, [aria-selected="true"]) {
    color: var(--cr-pill-accent-deep);
    background: var(--cr-pill-accent-soft);
    border-color: var(--cr-pill-accent);
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button:focus-visible {
    outline: 3px solid var(--cr-pill-accent);
    outline-offset: 2px;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button:is(.is-active, [aria-selected="true"])::before {
    background: var(--cr-pill-accent);
    border-color: var(--cr-pill-accent-deep);
    box-shadow: 0 0 0 3px rgba(54, 185, 144, .14);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-pill-accent) 14%, transparent);
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher > button > b {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 20px;
    min-height: 20px;
    margin-left: auto;
    padding: 2px 5px;
    background: var(--cr-pill-soft);
    border-radius: 999px;
}

@container (max-width: 460px) {
    :where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (max-width: 330px) {
    :where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    :where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 330px) {
    :where(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-card-sales-switcher {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.cr-app-v3-shell, .cr-public-page, .crn-app) .cr-pill-control {
        transition: none;
    }
}

/* BUILD 0021.24.3 — inspector side controls stay centered at every width. */
.crn-card-stage__tabs.cr-pill-set {
    display: flex;
    width: 100%;
    justify-content: center;
}