/* =========================================================
   SERVOMIX — LAUNCHER
   File: css/core/launcher.css
   Needs: tokens.css, base.css, components.css.
   Markup is built by js/core/launcher.js.
========================================================= */

.launcher{
    display:grid;
    gap:var(--s-5);
    padding:var(--s-5);
}

@media (min-width:768px){

    .launcher{
        padding:var(--s-6);
    }
}

.launcher__head{
    display:grid;
    gap:var(--s-1);
}

.launcher__title{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
    font-weight:var(--w-h3);
    font-stretch:var(--wd-text);
    letter-spacing:0;
}

.launcher__lede{
    color:var(--ink-2);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   STEP INDICATOR (a real sequence, so numbers are earned)
--------------------------------------------------------- */

.launcher__steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--s-2);
    margin:0;
}

.launcher__step{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    width:100%;
    min-height:40px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.launcher__num{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-variant-numeric:tabular-nums;
}

.launcher__step:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.launcher__step.is-done .launcher__num{
    background:var(--up-soft);
    color:var(--up);
}

.launcher__step[aria-current="step"]{
    border-color:var(--accent);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.launcher__step[aria-current="step"] .launcher__num{
    background:var(--surface);
    color:var(--accent);   /* 5.5:1; white on a white tint measured 3.9:1 */
}

.launcher__step:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   PANELS
   All three steps share one grid cell, so the Launcher is
   always as tall as its tallest step and never jumps. Hidden
   steps use visibility, which also removes them from the
   accessibility tree and the tab order.
--------------------------------------------------------- */

.launcher__body{
    display:grid;
}

.launcher__panel{
    grid-area:1 / 1;
    display:grid;
    align-content:start;
    gap:var(--s-4);
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.launcher__panel[hidden]{
    display:none;
}

.launcher__legend{
    float:left;     /* lets the legend sit inside the grid like a heading */
    width:100%;
    padding:0;
    color:var(--ink);
    font-weight:var(--w-strong);
}

.launcher__legend:focus{
    outline:none;
}

.launcher__legend:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
}

.launcher .segmented{
    justify-self:start;
}

.launcher__kind{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    gap:var(--s-1);
}

.launcher__kind label{
    justify-content:center;
    text-align:center;
    padding:0 var(--s-2);
    font-size:var(--t-small);
    white-space:nowrap;
}

@media (max-width:540px){
    .launcher__kind label{
        padding:0 var(--s-1);
        font-size:var(--t-micro);
    }
}

.launcher .segmented[hidden]{
    display:none;
}


/* ---------- Step 1: product tiles ---------- */

.launcher__products{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
}

.launcher__tile,
.launcher__location{
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:56px;
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.launcher__tile input,
.launcher__location input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.launcher__tile:hover,
.launcher__location:hover{
    border-color:var(--accent);
}

.launcher__tile:has(input:checked),
.launcher__location:has(input:checked){
    border:2px solid var(--accent);
    padding:calc(var(--s-2) - 1px) calc(var(--s-3) - 1px);
    background:var(--accent-soft);
}

.launcher__tile:has(input:focus-visible),
.launcher__location:has(input:focus-visible){
    box-shadow:var(--focus-ring);
}

.launcher__tile-media{
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    object-fit:cover;
}

.launcher__tile-icon{
    display:grid;
    place-items:center;
    background:var(--accent-soft);
    color:var(--accent);
}

.launcher__tile-text{
    display:grid;
    min-width:0;
    line-height:1.3;
}

.launcher__tile-name{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.launcher__tile-from{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-variant-numeric:tabular-nums;
}

.launcher__elsewhere,
.launcher__note{
    color:var(--ink-2);
}


/* ---------- Step 2: size ---------- */

.launcher__size{
    display:grid;
    gap:var(--s-1);
}

.launcher__range{
    width:100%;
    height:44px;
    margin:0;
    accent-color:var(--accent);
    cursor:pointer;
}

.launcher__range:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.launcher__ticks{
    display:flex;
    justify-content:space-between;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-variant-numeric:tabular-nums;
}

.launcher__readout{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

@media (min-width:480px){

    .launcher__readout{
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:start;
    }

    .launcher__specs{
        grid-column:1;
    }

    .launcher__price,
    .launcher__gst{
        grid-column:2;
        grid-row:1;
        text-align:right;
    }

    .launcher__gst{
        grid-row:2;
        align-self:start;
    }
}

.launcher__plan-name{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    font-size:var(--t-h3);
    font-weight:var(--w-h3);
    line-height:var(--lh-h3);
}

.launcher__plan-series{
    color:var(--ink-2);
}

.launcher__specs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2) var(--s-4);
    margin:0;
    color:var(--ink-2);
    font-size:var(--t-small);
}

.launcher__specs li{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.launcher__specs .icon{
    color:var(--accent);
}

.launcher__specs strong{
    color:var(--ink);
}

.launcher__price{
    display:grid;
    gap:2px;
}

.launcher__amount{
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    font-stretch:var(--wd-h2);
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.launcher__period,
.launcher__gst{
    color:var(--ink-2);
}


/* ---------- Step 3: locations ---------- */

.launcher__locations{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
}

.launcher__location .icon{
    color:var(--accent);
}

.launcher__location-name{
    font-weight:var(--w-strong);
}


/* ---------------------------------------------------------
   NAV + CONSOLE
--------------------------------------------------------- */

.launcher__nav{
    display:flex;
    justify-content:space-between;
    gap:var(--s-3);
}

.launcher__nav [data-next],
.launcher__nav [data-cta],
.launcher__nav [data-more]{
    margin-left:auto;
}

/* More games sits beside Next, both on the right */
.launcher__nav [data-more]:not([hidden]) + [data-next],
.launcher__nav [data-more]:not([hidden]) + [data-cta]{
    margin-left:0;
}

.launcher__nav [hidden]{
    display:none;
}

.launcher__console{
    display:none;
}

.launcher__lines{
    display:grid;
    gap:2px;
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
}

.launcher__lines .console__line{
    gap:var(--s-3);
}

.launcher__key{
    flex:0 0 7ch;
    color:var(--console-ink-2);
}

.launcher__lines .is-typing::after{
    content:"";
    display:inline-block;
    width:.55em;
    height:1em;
    margin-left:2px;
    vertical-align:-.15em;
    background:var(--up-fill);
}

.launcher__cta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-4);
}

.launcher__error{
    margin-top:var(--s-3);
    color:var(--down);
}


/* ---------------------------------------------------------
   OFFER TAG on the Game / Cloud switch (data/launcher.json
   "promos"): a red swing tag hanging off the option's corner
--------------------------------------------------------- */

/* Modern Clean Badge for promo tags */
.launcher__promo{
    position:relative;
    display:inline-flex;
    align-items:center;
    top:auto;
    right:auto;
    margin-left:6px;
    padding:2px 6px;
    background:rgba(239, 68, 68, 0.20);
    border:1px solid rgba(239, 68, 68, 0.40);
    border-radius:4px;
    color:#fca5a5;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    line-height:1;
    white-space:nowrap;
    clip-path:none;
    transform:none;
    pointer-events:none;
    text-transform:uppercase;
}

/* Eyelet removed */
.launcher__promo::before{
    display:none;
}