/* ========================================================================
   MISSION-CENTER-UX.CSS
   Reusable visual contract for Base Studio's mission center.
   Depends on tokens.css and galaxy-ux-bridge.css being loaded first.
   ======================================================================== */

#base-modal{
    --mission-surface:rgba(16,26,48,.64);
    --mission-surface-strong:rgba(8,13,26,.9);
    --mission-line:rgba(169,176,196,.22);
    --mission-line-active:rgba(231,178,92,.68);
    --mission-ink:var(--ink);
    --mission-ink-muted:var(--ink-faint);
    --mission-gold:var(--gold);
    --mission-radius:var(--radius-soft);
}

/* Mission navigation belongs to the same night/gold grammar as the editor. */
#base-modal .view-base-section-tabs{
    padding:4px;
    border-color:var(--mission-line);
    border-radius:var(--mission-radius);
    background:var(--mission-surface-strong);
}
#base-modal button.view-base-section-tab{
    --ui-action-fill:var(--mission-surface-strong) !important;
    --ui-action-line:var(--mission-line) !important;
    --ui-action-ink:var(--mission-ink-muted) !important;
    border-color:transparent !important;
    border-radius:var(--mission-radius) !important;
    background:transparent !important;
    color:var(--mission-ink-muted) !important;
    box-shadow:none !important;
}
#base-modal .view-base-section-tab:hover,
#base-modal .view-base-section-tab:focus-visible{
    background:rgba(70,54,25,.34) !important;
    color:var(--mission-ink) !important;
}
#base-modal button.view-base-section-tab.is-active{
    --ui-action-fill:rgba(70,54,25,.64) !important;
    --ui-action-line:var(--mission-line-active) !important;
    --ui-action-ink:#fff8e7 !important;
    border-color:var(--mission-line-active) !important;
    background:rgba(70,54,25,.64) !important;
    color:#fff8e7 !important;
    box-shadow:inset 0 1px 0 rgba(255,247,220,.1), 0 0 12px -7px var(--gold-focus) !important;
}
#base-modal .view-base-section-ready{
    border-color:var(--mission-line-active);
    border-radius:999px;
    background:rgba(70,54,25,.86);
    color:#fff8e7;
}

/* Center frame and information hierarchy. */
#base-modal .view-base-mission-center{
    padding:14px;
    border-color:var(--mission-line);
    border-radius:var(--mission-radius);
    background:var(--mission-surface);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#base-modal .view-base-mission-center-title,
#base-modal .view-base-mission-row-title,
#base-modal .view-base-mission-detail-title{
    color:var(--mission-ink);
}
#base-modal :is(.view-base-mission-center-summary,.view-base-mission-freshness,.view-base-mission-row-context,.view-base-mission-row-progress,.view-base-mission-detail-text,.view-base-mission-message){
    color:var(--mission-ink-muted);
}
#base-modal :is(.view-base-mission-detail-kicker,.view-base-mission-detail-label){ color:var(--mission-gold); }

/* Filters and refresh are neutral operational actions. */
#base-modal button:is(.view-base-mission-refresh,.view-base-mission-filter){
    --ui-action-fill:var(--mission-surface-strong) !important;
    --ui-action-line:var(--mission-line) !important;
    --ui-action-ink:var(--mission-ink) !important;
    border-color:var(--mission-line) !important;
    border-radius:0 !important;
    background:var(--mission-surface-strong) !important;
    color:var(--mission-ink) !important;
    box-shadow:none !important;
}
#base-modal :is(.view-base-mission-refresh,.view-base-mission-filter):is(:hover,:focus-visible){
    --ui-action-fill:rgba(70,54,25,.42) !important;
    --ui-action-line:var(--mission-line-active) !important;
    --ui-action-ink:#fff8e7 !important;
    border-color:var(--mission-line-active) !important;
    background:rgba(70,54,25,.42) !important;
    color:#fff8e7 !important;
    filter:none !important;
}
#base-modal button.view-base-mission-filter.is-active{
    --ui-action-fill:rgba(70,54,25,.68) !important;
    --ui-action-line:var(--mission-gold) !important;
    --ui-action-ink:#fff8e7 !important;
    border-color:var(--mission-gold) !important;
    background:rgba(70,54,25,.68) !important;
    color:#fff8e7 !important;
}
#base-modal #view-base-section-tabs #view-base-tab-missions.view-base-section-tab.is-active{
    --ui-action-fill:rgba(70,54,25,.64) !important;
    --ui-action-line:var(--mission-line-active) !important;
    --ui-action-ink:#fff8e7 !important;
}
#base-modal #view-base-mission-filters button.view-base-mission-filter.is-active{
    --ui-action-fill:rgba(70,54,25,.68) !important;
    --ui-action-line:var(--mission-gold) !important;
    --ui-action-ink:#fff8e7 !important;
}
#base-modal .view-base-mission-filter-count{
    border:1px solid rgba(231,178,92,.3);
    border-radius:999px;
    background:rgba(8,13,26,.86);
    color:var(--mission-ink);
}

/* Mission rows share calm structural surfaces; state gives meaning, not cyan. */
#base-modal .view-base-mission-row{
    border-color:var(--mission-line);
    border-radius:var(--mission-radius);
    background:rgba(8,13,26,.7);
}
#base-modal .view-base-mission-row-toggle{
    --ui-action-fill:transparent !important;
    --ui-action-line:transparent !important;
    --ui-action-ink:var(--mission-ink) !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    clip-path:none !important;
    color:var(--mission-ink) !important;
    box-shadow:none !important;
}
#base-modal .view-base-mission-row-toggle::before{
    content:none !important;
    display:none !important;
}
#base-modal .view-base-mission-row .view-base-mission-row-toggle[aria-expanded="true"]{
    --ui-action-fill:rgba(70,54,25,.16) !important;
    --ui-action-line:transparent !important;
    --ui-action-ink:var(--mission-ink) !important;
    background:rgba(70,54,25,.16) !important;
    color:var(--mission-ink) !important;
}
#base-modal .view-base-mission-row-toggle:hover,
#base-modal .view-base-mission-row-toggle:focus-visible{
    background:rgba(70,54,25,.2) !important;
    color:var(--mission-ink) !important;
    box-shadow:none !important;
    filter:none !important;
}
#base-modal .view-base-mission-row.is-selected{
    border-color:var(--mission-line-active);
    box-shadow:inset 3px 0 0 var(--mission-gold), inset 0 0 18px rgba(231,178,92,.06);
}
#base-modal .view-base-mission-row[data-state="ready"]{
    border-color:rgba(231,178,92,.7);
    background:rgba(70,54,25,.34);
}
#base-modal .view-base-mission-row[data-state="claimed"]{ border-color:rgba(124,164,142,.42); }
#base-modal .view-base-mission-code{
    border-color:rgba(231,178,92,.36);
    border-radius:var(--mission-radius);
    background:rgba(70,54,25,.5);
    color:#fff0b0;
}
#base-modal .view-base-mission-state{
    border-color:var(--mission-line);
    border-radius:999px;
    background:rgba(8,13,26,.88);
    color:var(--mission-ink-muted);
}
#base-modal [data-state="ready"] .view-base-mission-state{
    border-color:var(--mission-line-active);
    background:rgba(70,54,25,.86);
    color:#fff8e7;
}
#base-modal [data-state="claimed"] .view-base-mission-state{
    border-color:rgba(124,164,142,.42);
    background:rgba(23,58,43,.64);
    color:#d9f2df;
}

/* Detail panel, progress and rewards use the same restrained contrast scale. */
#base-modal .view-base-mission-detail{
    border-color:var(--mission-line);
    border-radius:var(--mission-radius);
    background:var(--mission-surface-strong);
}
#base-modal .view-base-mission-detail-status{
    padding:9px 10px;
    border-left:0;
    border:1px solid rgba(231,178,92,.3);
    border-radius:var(--mission-radius);
    background:rgba(70,54,25,.3);
    color:var(--mission-ink);
}
#base-modal .view-base-mission-progress-track{
    border-radius:var(--mission-radius);
    background:rgba(5,7,12,.86);
    box-shadow:inset 0 0 0 1px var(--mission-line);
}
#base-modal .view-base-mission-progress-fill{
    border-radius:inherit;
    background:linear-gradient(90deg,#9c6b26,var(--mission-gold),#f8d78a);
}
#base-modal .view-base-mission-reward-tag{
    border-color:rgba(231,178,92,.34);
    border-radius:var(--mission-radius);
    background:rgba(70,54,25,.38);
    color:#fff0b0;
}
#base-modal .view-base-mission-claim{
    --ui-action-fill:var(--gold) !important;
    --ui-action-line:#f8d78a !important;
    --ui-action-ink:var(--void) !important;
    border-radius:0 !important;
    background:var(--gold) !important;
    color:var(--void) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(82,52,10,.42), 0 0 16px -7px var(--gold-focus) !important;
}
#base-modal .view-base-mission-claim:is(:hover,:focus-visible){
    background:#f8d78a !important;
    color:var(--void) !important;
    filter:none !important;
}
#base-modal .view-base-mission-claim:disabled{
    --ui-action-fill:rgba(16,26,48,.58) !important;
    --ui-action-line:rgba(169,176,196,.18) !important;
    --ui-action-ink:var(--ink-faint) !important;
    background:rgba(16,26,48,.58) !important;
    color:var(--ink-faint) !important;
    box-shadow:none !important;
}
#base-modal .view-base-mission-empty{
    border-color:var(--mission-line);
    border-radius:var(--mission-radius);
    background:rgba(8,13,26,.48);
    color:var(--mission-ink-muted);
}

/* The mobile view intentionally keeps its selected detail within the row. */
@media (max-width:640px){
    #base-modal .view-base-mission-center{ padding:10px; }
    #base-modal .view-base-mission-row.is-selected .view-base-mission-inline-detail{
        border-top-color:var(--mission-line);
    }
}