/*
 * Homepage platforms section (partials/home/platforms.leaf): the SDK strip and
 * the localization section.
 *
 * Loaded by a stylesheet link in that partial. Colours come from the --fk-*
 * tokens in tokens.css, so the section follows [data-theme] and
 * prefers-color-scheme. The code window pins data-theme="dark" and stays a
 * dark surface in both themes.
 *
 * The SDK switch is a radio group. :has() shows the matching panel, so the
 * tabs work with no script and under a strict script policy; a browser
 * without :has() keeps the Swift panel.
 *
 * Typing: every line is in the HTML. Public/js/story.js adds .is-armed (a
 * cover over each line) and then .is-typing, which slides each cover off its
 * line one character per step: transform only. Without script, or with
 * reduced motion, .is-armed never appears and the code is simply there.
 */

.fk-plat,
.fk-plat-loc {
    background: var(--fk-surface-alt);
    color: var(--fk-ink);
    padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

.fk-plat-loc {
    background: var(--fk-surface);
}

.fk-plat__intro,
.fk-plat-loc__intro {
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
    text-align: center;
}

.fk-plat__eyebrow {
    margin: 0 0 var(--fk-space-sm);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--fk-primary-text);
}

.fk-plat__title {
    margin: 0;
    font-size: var(--fk-font-h2);
    font-weight: 700;
    letter-spacing: var(--fk-tracking-tight);
    line-height: var(--fk-leading-tight);
    color: var(--fk-ink);
    text-wrap: balance;
}

.fk-plat__lead {
    margin: var(--fk-space-md) auto 0;
    max-width: 40rem;
    font-size: var(--fk-font-lead);
    line-height: var(--fk-leading-body);
    color: var(--fk-ink-soft);
    text-wrap: pretty;
}

/* ---------- SDK strip ---------- */

.fk-sdk {
    --fk-code-bg: #14141f;
    scroll-margin-top: 5rem;
}

.fk-sdk__wrap {
    box-sizing: border-box;
    width: min(100%, var(--fk-container));
    margin: var(--fk-space-xl) auto 0;
    padding-inline: var(--fk-gutter);
}

.fk-sdk__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--fk-space-sm);
    margin: 0 0 var(--fk-space-lg);
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Positioned so the visually hidden radio stays inside the tab (and inside
   the side-scrolling strip on phones) instead of widening the page. */
.fk-sdk__tab {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    cursor: pointer;
    transition:
        border-color var(--fk-duration-base) var(--fk-ease-out),
        box-shadow var(--fk-duration-base) var(--fk-ease-out),
        transform var(--fk-duration-base) var(--fk-ease-out);
}

.fk-sdk__tab:hover:not(:has(:checked)) {
    transform: translateY(-2px);
}

.fk-sdk__tab:has(:checked) {
    border-color: var(--fk-primary);
    box-shadow: var(--fk-shadow-glow);
}

.fk-sdk__tab:has(:focus-visible) {
    outline: 2px solid var(--fk-focus);
    outline-offset: 3px;
}

.fk-sdk__mark {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: var(--fk-sdk-mark);
    color: var(--fk-sdk-mark-ink, #ffffff);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fk-sdk__tab--swift { --fk-sdk-mark: linear-gradient(160deg, #fa7343, #e8452c); }
.fk-sdk__tab--kotlin { --fk-sdk-mark: linear-gradient(135deg, #e44857, #c711e1 50%, #7f52ff); }
.fk-sdk__tab--flutter { --fk-sdk-mark: linear-gradient(160deg, #13b9fd, #02569b); }
.fk-sdk__tab--react { --fk-sdk-mark: #20232a; --fk-sdk-mark-ink: #61dafb; }
.fk-sdk__tab--javascript { --fk-sdk-mark: #f7df1e; --fk-sdk-mark-ink: #1b1b1b; }

.fk-sdk__name {
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.fk-sdk__where {
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    white-space: nowrap;
}

.fk-sdk__body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: stretch;
}

.fk-sdk__window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--fk-radius-xl);
    color: #e2e8f0;
    box-shadow: var(--fk-shadow-xl);
}

.fk-sdk__chrome {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fk-sdk__dots {
    display: flex;
    gap: 0.4rem;
}

.fk-sdk__dots i {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #ff5f57;
}

.fk-sdk__dots i + i { background: #febc2e; }
.fk-sdk__dots i + i + i { background: #28c840; }

.fk-sdk__file {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Reserve the tallest snippet (14 lines) so switching tabs never moves the
   page. */
.fk-code {
    flex: 1;
    box-sizing: border-box;
    min-height: calc(14 * 1.75em + 3rem);
    margin: 0;
    padding: 1.5rem 1.6rem;
    overflow-x: auto;
    background: var(--fk-code-bg);
    color: #e2e8f0;
    font-family: 'SF Mono', ui-monospace, 'Fira Code', Menlo, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.75;
    white-space: pre;
    tab-size: 4;
}

.fk-code code {
    font: inherit;
}

.fk-code__ln {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.tk-k { color: #f472b6; }
.tk-s { color: #fdba74; }
.tk-c { color: #7c8aa5; }
.tk-t { color: #7dd3fc; }
.tk-a { color: #c4b5fd; }

/* Typed in: the cover sits over each line until its turn, then steps off
   one character at a time with the caret on its leading edge. Safari holds a
   steps() animation's fill on its last-but-one step, which left the final
   character covered and the caret parked on it, so a second animation hides
   the cover outright once the line's time is up. */
.fk-code.is-armed .fk-code__ln:not(.is-blank)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-inline-start: 2px solid transparent;
    background: var(--fk-code-bg);
    transform: translateX(0);
}

.fk-code.is-armed.is-typing .fk-code__ln:not(.is-blank)::after {
    animation:
        fk-code-type var(--t, 400ms) steps(var(--n, 10), end) var(--d, 0ms) forwards,
        fk-code-typed 1ms linear calc(var(--d, 0ms) + var(--t, 400ms)) forwards;
}

[dir="rtl"] .fk-code {
    direction: ltr;
    text-align: left;
}

@keyframes fk-code-type {
    from { transform: translateX(0); border-inline-start-color: #f7a50d; }
    to { transform: translateX(calc(100% + 2px)); border-inline-start-color: #f7a50d; }
}

@keyframes fk-code-typed {
    from, to { visibility: hidden; }
}

.fk-sdk__side {
    display: flex;
    flex-direction: column;
    gap: var(--fk-space-md);
    min-width: 0;
    padding: var(--fk-space-xl) var(--fk-space-lg);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-xl);
    background: var(--fk-surface-raised);
}

.fk-sdk__side > div {
    flex: 1;
}

.fk-sdk__h {
    margin: 0 0 var(--fk-space-sm);
    color: var(--fk-ink);
    font-size: var(--fk-font-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fk-sdk__side p {
    margin: 0;
    color: var(--fk-ink-soft);
    line-height: var(--fk-leading-body);
}

.fk-sdk__points {
    display: grid;
    gap: 0.55rem;
    margin: var(--fk-space-lg) 0;
    padding: 0;
    list-style: none;
}

.fk-sdk__points li {
    position: relative;
    padding-inline-start: 1.6rem;
    color: var(--fk-ink);
    line-height: 1.45;
}

.fk-sdk__points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat,
        var(--fk-accent-gradient);
}

.fk-sdk__docs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fk-primary-text);
    font-weight: 600;
    text-decoration: none;
}

.fk-sdk__docs::after {
    content: "\2192";
}

.fk-sdk__docs:hover {
    text-decoration: underline;
}

.fk-sdk__docs:focus-visible,
.fk-sdk__server a:focus-visible {
    outline: 2px solid var(--fk-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.fk-sdk__server {
    padding-top: var(--fk-space-md);
    border-top: 1px solid var(--fk-hairline);
    font-size: var(--fk-font-small);
}

.fk-sdk__server a {
    color: var(--fk-primary-text);
    font-weight: 600;
}

/* Panel switching */
.fk-sdk .fk-sdk__for {
    display: none;
}

.fk-sdk .fk-sdk__for-swift,
.fk-sdk:has(#fk-sdk-kotlin:checked) .fk-sdk__for-kotlin,
.fk-sdk:has(#fk-sdk-flutter:checked) .fk-sdk__for-flutter,
.fk-sdk:has(#fk-sdk-react:checked) .fk-sdk__for-react,
.fk-sdk:has(#fk-sdk-javascript:checked) .fk-sdk__for-javascript {
    display: block;
}

.fk-sdk:has(#fk-sdk-kotlin:checked) .fk-sdk__for-swift,
.fk-sdk:has(#fk-sdk-flutter:checked) .fk-sdk__for-swift,
.fk-sdk:has(#fk-sdk-react:checked) .fk-sdk__for-swift,
.fk-sdk:has(#fk-sdk-javascript:checked) .fk-sdk__for-swift {
    display: none;
}

@media (max-width: 1023px) {
    .fk-sdk__body {
        grid-template-columns: 1fr;
    }

    .fk-sdk__side {
        padding: var(--fk-space-lg);
    }
}

/* Tablet width: five tiles do not fit in one row (React Native and "iOS,
   macOS, visionOS" widened the page by ~24px at 768px), so they wrap 3 + 2. */
@media (min-width: 768px) and (max-width: 1023px) {
    .fk-sdk__tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fk-sdk__tab {
    min-width: 0;
}

/* Phone width: the strip scrolls sideways and snaps; the cards keep their
   size instead of squeezing five names into 390px. */
@media (max-width: 767px) {
    .fk-sdk__wrap {
        padding-inline: 0;
    }

    .fk-sdk__tabs {
        display: flex;
        gap: var(--fk-space-xs);
        margin-bottom: var(--fk-space-md);
        padding: 0.25rem var(--fk-gutter) 0.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--fk-gutter);
        scrollbar-width: none;
    }

    .fk-sdk__tabs::-webkit-scrollbar {
        display: none;
    }

    .fk-sdk__tab {
        flex: 0 0 auto;
        padding: 0.6rem 0.85rem;
        scroll-snap-align: start;
    }

    .fk-sdk__mark {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.75rem;
    }

    .fk-sdk__body {
        padding-inline: var(--fk-gutter);
    }

    .fk-code {
        min-height: calc(14 * 1.7em + 2.2rem);
        padding: 1.1rem 1rem;
        font-size: 0.72rem;
        line-height: 1.7;
    }
}

/* ---------- Localization ---------- */

.fk-plat-loc__grid,
.fk-plat-loc__langs {
    box-sizing: border-box;
    max-width: var(--fk-container);
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

.fk-plat-loc__grid {
    display: grid;
    gap: var(--fk-space-lg);
    margin-top: var(--fk-space-xl);
}

@media (min-width: 768px) {
    .fk-plat-loc__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fk-plat-loc__card,
.fk-plat-loc__lang {
    background: var(--fk-surface-raised);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
}

.fk-plat-loc__card {
    padding: var(--fk-space-xl);
}

.fk-plat-loc__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--fk-space-lg);
    border-radius: var(--fk-radius-md);
    background: var(--fk-primary-soft);
    color: var(--fk-primary-text);
}

.fk-plat-loc__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.fk-plat-loc__card h3 {
    margin: 0 0 0.75rem;
    font-size: var(--fk-font-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--fk-leading-snug);
    color: var(--fk-ink);
}

.fk-plat-loc__card p {
    margin: 0;
    color: var(--fk-ink-soft);
    line-height: var(--fk-leading-body);
}

/* Eleven languages as a centred, wrapping row of pills: any row that does
   not fill is centred, so nothing ever hangs alone on the left. */
.fk-plat-loc__langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--fk-space-xl);
    margin-bottom: 0;
    list-style: none;
}

.fk-plat-loc__lang {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--fk-radius-pill);
}

.fk-plat-loc__lang b {
    color: var(--fk-ink);
    font-weight: 600;
}

.fk-plat-loc__lang span {
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
}

@media (prefers-reduced-motion: reduce) {
    .fk-sdk__tab {
        transition: none;
    }

    .fk-sdk__tab:hover:not(:has(:checked)) {
        transform: none;
    }

    .fk-code.is-armed .fk-code__ln::after {
        display: none;
    }
}

/* The code panels scroll sideways, so they take keyboard focus (tabindex="0"). */
.fk-code:focus-visible {
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 3px;
}