/* VIS-02 8-D production palette.
   Sage denotes state and state-changing controls. Wine denotes navigation and
   progression. Secondary utilities stay neutral; danger remains independent. */

/* Home's three introductory destinations and the Riff band carry the locked
   shadowed-sage dose. Photo wells and the shared ticket stay cream. */
.cards > .card > .card-body,
.spotlight {
    background: var(--sage);
}

.cards > .card > .card-body .card-title,
.cards > .card > .card-body .card-text,
.spotlight .spotlight-label,
.spotlight .spotlight-note {
    color: var(--sage-text);
}

.cards > .card > .card-body .card-label,
.cards > .card > .card-body .cta-link,
.spotlight .cta-link-mobile {
    color: var(--sage-text);
}

.spotlight > .cta-pill,
.spotlight-intro .cta-pill,
.lineups-invite .cta-pill {
    color: var(--cream);
    border-color: rgba(var(--cream-rgb), .55);
}

.spotlight > .cta-pill:hover,
.spotlight > .cta-pill:focus-visible,
.spotlight-intro .cta-pill:hover,
.spotlight-intro .cta-pill:focus-visible,
.lineups-invite .cta-pill:hover,
.lineups-invite .cta-pill:focus-visible {
    color: var(--cream);
    border-color: var(--cream);
    background: rgba(var(--cream-rgb), .10);
}

.spotlight .build-ticket,
.ticket,
.capture-card,
.print-ticket-page {
    background: var(--ticket-bg);
}

.hero-title em::after {
    content: none;
}

/* Explore remains the production chocolate band rather than receiving sage. */
.lineups-invite {
    background: var(--dark-zone);
}

.lineups-invite .section-eyebrow,
.lineups-invite .lineups-title em {
    color: var(--sage-text);
}

.lineups-invite .lineups-title,
.lineups-invite .lineups-copy,
.lineups-invite .home-lineup-meta,
.lineups-invite .home-lineup-title,
.lineups-invite .home-lineup-desc {
    color: var(--sage-text);
}

.lineups-invite .home-lineup-card {
    background: color-mix(in srgb, var(--card-bg) 18%, var(--dark-zone));
    border-color: rgba(var(--cream-rgb), .22);
}

/* Selected state and explicit state-changing actions. */
.chip.selected {
    border-color: var(--state-color);
    background: var(--state-color);
    color: var(--state-text);
}

.chip.selected:focus-visible {
    border-color: var(--state-hover);
    background: var(--state-hover);
    color: var(--state-text);
}

.chip.selected:focus-visible .chip-check-icon {
    display: none;
}

.chip.selected:focus-visible::before {
    content: "\00d7";
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    flex: 0 0 14px;
    font-size: 18px;
    font-weight: 500;
    line-height: 14px;
}

@media (hover: hover) {
    .chip.selected:hover {
        border-color: var(--state-hover);
        background: var(--state-hover);
        color: var(--state-text);
    }

    .chip.selected:hover .chip-check-icon {
        display: none;
    }

    .chip.selected:hover::before {
        content: "\00d7";
        display: inline-grid;
        width: 14px;
        height: 14px;
        place-items: center;
        flex: 0 0 14px;
        font-size: 18px;
        font-weight: 500;
        line-height: 14px;
    }
}

.doc-editor--build .doc-editor-save-btn,
.doc-editor-save-btn:not(.is-muted):not(.is-clean):not(:disabled),
.doc-editor--lineup .doc-editor-save-btn.is-dirty,
.doc-editor--lineup .doc-editor-save-btn.is-saving,
.adm-btn-primary[data-act^="save"],
.adm-btn-primary[data-act="alias-save"],
.adm-btn-primary[data-act="add-section"] {
    border-color: var(--state-color);
    background: var(--state-color);
    color: var(--state-text);
}

.doc-editor--build .doc-editor-save-btn:hover,
.doc-editor--build .doc-editor-save-btn:focus-visible,
.doc-editor-save-btn:not(.is-muted):not(.is-clean):not(:disabled):hover,
.doc-editor-save-btn:not(.is-muted):not(.is-clean):not(:disabled):focus-visible,
.adm-btn-primary[data-act^="save"]:hover:not(:disabled),
.adm-btn-primary[data-act="alias-save"]:hover:not(:disabled),
.adm-btn-primary[data-act="add-section"]:hover:not(:disabled) {
    border-color: var(--state-hover);
    background: var(--state-hover);
    color: var(--state-text);
}

.suggestion-add-btn:hover,
.suggestion-add-btn:focus-visible,
.le-add-btn:hover,
.le-add-btn:focus-visible,
.le-note-add:hover,
.le-note-add:focus-visible,
.fb-add-bottom:hover,
.fb-add-bottom:focus-visible,
.pizza-action[data-act="save"],
.pizza-action[data-act="add-to-lineup"] {
    border-color: var(--state-color);
    color: var(--state-color);
}

.suggestion-add-btn:hover,
.suggestion-add-btn:focus-visible {
    background: var(--state-color);
    color: var(--state-text);
}

.pizza-action[data-act="save"]:hover,
.pizza-action[data-act="add-to-lineup"]:hover,
.pizza-action[data-act="save"].is-saved,
.pizza-action[data-act="add-to-lineup"].is-added {
    border-color: var(--state-hover);
    background: rgba(var(--sage-rgb), .12);
    color: var(--state-hover);
}

.adm-edit-row.is-active,
.adm-edit-row.has-thumbnail.is-active {
    border-color: var(--state-color);
    background: var(--state-color);
    color: var(--state-text);
}

.adm-edit-row.has-thumbnail.is-active .adm-edit-row-thumb {
    border-color: var(--state-color);
    color: var(--state-color);
    box-shadow: 0 0 0 2px rgba(var(--sage-rgb), .18);
}

.adm-edit-row.has-thumbnail.is-active .adm-edit-row-title,
.adm-status.is-saved {
    color: var(--state-color);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--state-color);
}

/* Shared screen, Save-image, mobile-manual, and print ticket palette. */
.ticket-order-no,
.ticket-order-date,
.capture-card .cap-order-no,
.capture-card .cap-order-date {
    color: var(--ticket-meta);
}

.ticket-rail-site,
.capture-card .cap-footer,
.print-ticket-page .print-name,
.print-ticket-page .print-section-label,
.print-ticket-page .print-balance-title {
    color: var(--rust);
}

.ticket-editorial-rule,
.capture-card .cap-divider,
.balance-meter,
.capture-card .cap-balance-title,
.print-ticket-page .print-divider,
.print-ticket-page .print-balance-title {
    border-color: var(--ticket-rule);
}

.ticket-chip.added,
.capture-card .cap-chip.added,
.print-ticket-page .print-chip.added {
    border-color: rgba(var(--sage-rgb), .46);
    background: rgba(var(--sage-rgb), .34);
}

.meter-tick,
.capture-card .cap-meter-tick,
.print-ticket-page .print-meter-tick {
    background: var(--ticket-meter-empty);
}

.meter-tick.filled,
.capture-card .cap-meter-tick.filled,
.print-ticket-page .print-meter-tick.filled {
    background: var(--ticket-meter-mid);
}

.meter-tick.filled.high,
.capture-card .cap-meter-tick.high,
.print-ticket-page .print-meter-tick.high {
    background: var(--ticket-meter-high);
}

@media (forced-colors: active) {
    .chip.selected,
    .doc-editor-save-btn,
    .adm-btn-primary,
    .suggestion-add-btn,
    .pizza-action,
    .le-add-btn,
    .le-note-add,
    .fb-add-bottom {
        border-color: ButtonBorder;
        background: ButtonFace;
        color: ButtonText;
    }

    .chip.selected {
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }
}