/* =========================================================
   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:clamp(10px, 1.6vh, 18px);
    padding:clamp(14px, 2.2vh, 22px);
    border-radius:14px;
}

@media (min-width:768px){

    .launcher{
        padding:clamp(16px, 2.4vh, 24px);
    }
}

.launcher__head{
    display:grid;
    gap:3px;
}

.launcher__title{
    font-size:clamp(1.3rem, 2.4vh, 1.55rem);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-0.01em;
}

.launcher__lede{
    color:var(--ink-2);
    font-size:0.875rem;
}


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

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

.launcher__step{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:clamp(34px, 4.2vh, 38px);
    padding:0 12px;
    border:1px solid var(--line-strong);
    border-radius:8px;
    background:var(--surface);
    color:var(--ink-2);
    font-size:0.8125rem;
    font-weight:600;
    transition:all var(--dur-fast) var(--ease);
}

.launcher__num{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:6px;
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:11px;
    font-weight:700;
    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:clamp(8px, 1.4vh, 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);
    font-size:0.9375rem;
}

.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:1fr 1.35fr 1fr;
    width:100%;
    gap:4px;
    padding:3px;
    border-radius:8px;
    background:rgba(255, 255, 255, 0.03);
    border:1px solid var(--line-strong);
}

.launcher__kind label{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 10px;
    min-height:clamp(32px, 4vh, 36px);
    font-size:0.8125rem;
    font-weight:600;
    white-space:nowrap;
    box-sizing:border-box;
    width:100%;
    border-radius:6px;
    cursor:pointer;
    transition:all var(--dur-fast) var(--ease);
}

@media (max-width:580px){
    .launcher__kind{
        grid-template-columns:1fr 1.3fr 1fr;
        gap:2px;
    }
    .launcher__kind label{
        padding:0 3px;
        font-size:11.5px;
    }
}

@media (max-width:440px){
    .launcher__kind{
        grid-template-columns:1fr;
        gap:4px;
    }
    .launcher__kind label{
        justify-content:flex-start;
        padding:0 12px;
    }
}

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


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

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

.launcher__tile,
.launcher__location{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:clamp(48px, 5.5vh, 52px);
    padding:6px 12px;
    border:1px solid var(--line-strong);
    border-radius:8px;
    background:var(--surface);
    cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
    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:1.5px solid var(--accent);
    padding:calc(6px - 0.5px) calc(12px - 0.5px);
    background:rgba(37, 99, 235, 0.10);
    box-shadow:0 0 0 1px rgba(37, 99, 235, 0.25);
}

.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:34px;
    height:34px;
    border-radius:6px;
    object-fit:cover;
}

.launcher__tile-icon{
    display:grid;
    place-items:center;
    background:rgba(37, 99, 235, 0.12);
    color:var(--accent);
    border-radius:6px;
}

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

.launcher__tile-name{
    color:var(--ink);
    font-weight:600;
    font-size:0.875rem;
}

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

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


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

.launcher__size{
    display:grid;
    gap:4px;
}

.launcher__series{
    border-radius:8px;
    padding:3px;
}

.launcher__series label{
    min-height:30px;
    font-size:0.8125rem;
    border-radius:6px;
    padding:0 12px;
}

.launcher__range{
    width:100%;
    height:32px;
    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:0.75rem;
    font-weight:500;
    font-variant-numeric:tabular-nums;
    margin-top:-2px;
}

.launcher__readout{
    display:grid;
    gap:10px;
    padding:14px 16px;
    border:1px solid var(--line-strong);
    border-radius:10px;
    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:8px;
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
}

.launcher__plan-name .badge{
    font-size:10px;
    padding:2px 6px;
    border-radius:4px;
}

.launcher__plan-series{
    color:var(--ink-2);
    font-size:0.8125rem;
}

.launcher__specs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 14px;
    margin:0;
    color:var(--ink-2);
    font-size:0.8125rem;
}

.launcher__specs li{
    display:flex;
    align-items:center;
    gap:6px;
}

.launcher__specs .icon{
    width:16px;
    height:16px;
    color:var(--accent);
    flex-shrink:0;
}

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

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

.launcher__amount{
    font-size:1.85rem;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em;
}

.launcher__period{
    color:var(--ink-2);
    font-size:0.75rem;
}

.launcher__gst{
    color:var(--ink-2);
    font-size:0.6875rem;
}


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

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

.launcher__location{
    min-height:48px;
    border-radius:8px;
    padding:6px 12px;
}

.launcher__location .icon{
    color:var(--accent);
    width:18px;
    height:18px;
}

.launcher__location-name{
    font-weight:600;
    font-size:0.875rem;
}

.launcher__note{
    font-size:0.8125rem;
    color:var(--ink-2);
    line-height:1.4;
}


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

.launcher__nav{
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.launcher__nav .btn{
    min-height:clamp(36px, 4.4vh, 40px);
    padding:0 16px;
    font-size:0.8125rem;
    font-weight:600;
    border-radius:8px;
}

.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"): clean modern pill badge
--------------------------------------------------------- */

.launcher__promo{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1px 5px;
    margin-left:4px;
    border-radius:4px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    line-height:1.2;
    white-space:nowrap;
    flex-shrink:0;
    vertical-align:middle;
    pointer-events:none;
    text-transform:uppercase;
    background:rgba(239, 68, 68, 0.16);
    border:1px solid rgba(239, 68, 68, 0.35);
    color:#f87171;
    transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.launcher__promo--new{
    background:rgba(16, 185, 129, 0.16);
    border-color:rgba(16, 185, 129, 0.35);
    color:#34d399;
}

/* Active state: crisp white pill tag on the blue active button */
.launcher__kind label:has(input:checked) .launcher__promo,
.launcher__kind label.is-active .launcher__promo{
    background:rgba(255, 255, 255, 0.22);
    border-color:rgba(255, 255, 255, 0.40);
    color:#ffffff;
}

@media (max-width:440px){
    .launcher__promo{
        margin-left:auto;
    }
}

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


/* ---------------------------------------------------------
   VIEWPORT HEIGHT ADAPTIVE SCALING (Element Shapes & Spacing)
--------------------------------------------------------- */

@media (max-height: 860px) {
    .launcher {
        gap: 10px;
        padding: 12px 18px;
    }
    .launcher__head {
        gap: 2px;
    }
    .launcher__title {
        font-size: 1.3rem;
    }
    .launcher__steps {
        gap: 4px;
    }
    .launcher__step {
        min-height: 34px;
        padding: 0 8px;
    }
    .launcher__num {
        width: 20px;
        height: 20px;
    }
    .launcher__panel {
        gap: 8px;
    }
    .launcher__kind {
        padding: 2px;
    }
    .launcher__kind label {
        min-height: 32px;
        padding: 0 6px;
    }
    .launcher__products {
        gap: 6px;
    }
    .launcher__tile,
    .launcher__location {
        min-height: 46px;
        padding: 4px 10px;
        gap: 8px;
    }
    .launcher__tile-media {
        width: 32px;
        height: 32px;
    }
    .launcher__range {
        height: 28px;
    }
    .launcher__readout {
        padding: 10px 14px;
        gap: 8px;
    }
    .launcher__specs {
        gap: 4px 10px;
    }
    .launcher__amount {
        font-size: 1.65rem;
    }
    .launcher__locations {
        gap: 6px;
    }
    .launcher__nav {
        gap: 6px;
    }
    .launcher__nav .btn {
        min-height: 34px;
        padding: 0 14px;
    }
}