/*
The site's whole look, in one file. The values are the ones MUI Joy's dark
theme drew the site with before it was plain HTML, so the pages look as they
did: the same colours, sizes and spacing, without the library.
*/

/*
Inter, served with the site, for the page's own text: what is not in a card,
a list, a form field or a button -- a heading set on its own, the flags. The
rest names "Inter" too, but only as a font the visitor's machine may already
have, falling back to the system's own: that is how the site looked when MUI
Joy drew it, and how it still looks. The files are the ones Google Fonts
serves, split by alphabet; a browser fetches only those a page uses.
*/

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Site Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("./fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial, sized to take up Inter's room while Inter is on its way. */
@font-face {
    font-family: "Site Inter Fallback";
    src: local("Arial");
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0.00%;
    size-adjust: 107.06%;
}

:root {
    color-scheme: dark;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --text: #CDD7E1;
    --text-strong: #F0F4F8;
    --text-icon: #9FA6AD;
    --background: #000;
    --surface: #0B0D0E;

    --blue: #0B6BCB;
    --blue-hover: #185EA5;
    --blue-pressed: #12467B;
    --blue-soft: #0A2744;
    --blue-soft-text: #C7DFF7;
    --blue-light: #97C3F0;
    --blue-message: #4393E4;

    --grey-soft: #171A1C;
    --grey-soft-text: #DDE7EE;
    --grey-border: #32383E;

    --red: #C41C1C;
    --red-light: #E47474;
    --red-soft: #430A0A;
    --red-soft-text: #F7C5C5;

    --radius: 6px;
    --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.6);
}

/* ------------------------------------------------------------- the page */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

[hidden] {
    display: none !important;
}

strong, b {
    font-weight: 600;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Site Inter", "Site Inter Fallback";
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--background);
}

/* Everything that was a Joy component names Joy's fonts itself. */
.masthead h1, .title, .crumbs, .button, .card, .bullets, .policy .heading,
.policy .subheading, .policy .text, .field label, .input, .textarea, .hint {
    font-family: var(--font);
}

.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    text-align: center;
}

.masthead {
    color: var(--blue-soft-text);
    background-color: var(--blue-soft);
    padding: 0.85rem 16px;
}

.masthead h1 {
    margin: 0;
    font-weight: 700;
    font-size: 1.9125rem;
    line-height: 1.33334;
    letter-spacing: -0.025em;
    color: var(--text-strong);
}

.flags {
    margin-top: auto;
    padding: 8px 16px;
    background-color: var(--blue-soft);
}

.flags span {
    display: inline-block;
    font-size: 1em;
    line-height: 1em;
    vertical-align: middle;
}

.column {
    display: flex;
    flex-direction: column;
}

/* A product's name or what it does, beside its icon. */
.title {
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--text-strong);
    text-align: center;
}

.beside {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* ------------------------------------------------------- the breadcrumbs */

.crumbs {
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li {
    display: flex;
    align-items: center;
}

.crumbs li[aria-hidden] {
    user-select: none;
}

.crumbs p, .crumbs span {
    display: block;
    margin: 0;
    color: var(--text);
}

/* -------------------------------------------------------------- buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    box-sizing: border-box;
    min-height: 2.25rem;
    padding: 0.375rem 1rem;
    margin: 0;
    border: none;
    border-radius: var(--button-radius, var(--radius));
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: #FFF;
    background-color: var(--blue);
}

@media (hover: hover) {
    .button:hover { background-color: var(--blue-hover); }
}

.button:active { background-color: var(--blue-pressed); }

a:focus-visible { outline: none; }

a:focus-visible > .button, .button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.button.large {
    min-height: 2.75rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
}

.button.outlined {
    color: var(--blue-soft-text);
    background-color: transparent;
    border: 1px solid var(--blue-pressed);
}

@media (hover: hover) {
    .button.outlined:hover { background-color: var(--blue-soft); }
}

.button.outlined:active { background-color: var(--blue-pressed); }

.button.plain {
    color: var(--blue-light);
    background-color: transparent;
}

@media (hover: hover) {
    .button.plain:hover { background-color: var(--blue-soft); }
}

.button.plain:active { background-color: var(--blue-pressed); }

.button svg {
    font-size: 1.5rem;
    margin: 0 0.75rem 0 -0.375rem;
}

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
    fill: currentColor;
    user-select: none;
}

/* ---------------------------------------------------------------- cards */

.card {
    --card-padding: 0.625rem;
    /* What Joy rounds a card's pictures and buttons by: 2.5px. */
    --inner-radius: 2.5px;
    --button-radius: var(--inner-radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    padding: var(--card-padding);
    border: 1px solid var(--grey-border);
    border-radius: var(--radius);
    background-color: var(--surface);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--grey-soft-text);
}

.card.wide {
    max-width: 100%;
    min-width: 100%;
}

@media (min-width: 900px) {
    .card.wide {
        max-width: 600px;
        min-width: 600px;
    }
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 9999;
    z-index: 1;
    column-gap: var(--card-padding);
    row-gap: 2px;
}

/* Links in a card keep the ordinary rounding; only the card's own row of
   buttons takes the card's. */
.card-content .button {
    --button-radius: var(--radius);
}

.card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(0.625 * var(--card-padding));
    z-index: 1;
    padding: calc(0.75 * var(--card-padding)) 0 0 0;
}

.card-actions > * {
    flex: 1;
}

.card-actions > a > .button {
    width: 100%;
}

/* A picture in a box of a set shape, shrunk to fit, on a dark ground. */
.aspect {
    --ratio: calc(100% / (16 / 9));
    display: block;
    border-radius: var(--inner-radius, 0);
}

.aspect.square {
    --ratio: 100%;
}

.aspect-content {
    position: relative;
    height: 0;
    padding-bottom: var(--ratio);
    overflow: hidden;
    border-radius: inherit;
    background-color: var(--grey-soft);
}

.aspect-content img {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

/* ------------------------------------------------------------ home page */

.apps {
    display: grid;
    /* As many apps to a row as the screen is wide enough for, each card at
       least a phone's width: one on a phone held upright, two or three on a
       tablet depending on which way it is held, more on a monitor. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 8px;
    padding: 8px;
}

/* -------------------------------------------------------- product pages */

.product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 8px;
}

@media (min-width: 900px) {
    .product {
        flex-direction: row;
    }
}

.bullets, .bullets ul {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    margin: 0;
    list-style: none;
    line-height: 1.75rem;
    color: var(--text);
    text-align: left;
}

.bullets {
    padding: 0.375rem 0 0.375rem 3ch;
    font-size: 1rem;
}

.bullets li {
    display: list-item;
    list-style-type: disc;
    position: relative;
    flex: none;
    min-block-size: 2.25rem;
    padding: 0.25rem;
}

/* A point with points of its own under it. */
.bullets li.nested {
    padding-block: 0;
}

.bullets li.nested > div {
    display: flex;
    align-items: center;
    min-block-size: 2.25rem;
    padding: 0.25rem;
    margin-inline: -0.25rem;
}

.bullets ul {
    padding: 0 0 0 2ch;
    margin-inline: -0.25rem;
}

.bullets ul li {
    list-style-type: circle;
}

.store-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-top: 16px;
    text-align: center;
}

.store-links.row {
    justify-content: center;
}

@media (min-width: 600px) {
    .store-links.row {
        flex-direction: row;
    }
}

/* ----------------------------------------------------------- carousels */

.carousel {
    position: relative;
    overscroll-behavior-x: contain;
}

.carousel-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    user-select: none;
}

.carousel-track {
    display: flex;
    text-align: left;
}

.carousel-track.moving {
    transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.carousel-track > * {
    flex: 0 0 100%;
    min-width: 0;
}

.carousel img {
    -webkit-user-drag: none;
    user-select: none;
}

.unseen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------- privacy policy */

.policy {
    padding: 0 24px;
    text-align: left;
}

.policy .heading {
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1.33334;
    letter-spacing: -0.025em;
    color: var(--text-strong);
}

.policy .subheading {
    padding-top: 16px;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.33334;
    color: var(--text-strong);
}

.policy .text {
    padding-top: 8px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
}

/* --------------------------------------------------------- feedback form */

.feedback {
    border: 1px solid;
    border-radius: 7px;
    padding: 8px;
}

.status {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--blue-message);
}

.status.failure {
    color: var(--red);
}

@media (min-width: 600px) {
    .status { padding: 0 24px; }
}

@media (min-width: 1200px) {
    .status { max-width: 1200px; }
}

.fields {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.field {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 8px;
}

.fields .field {
    width: 50%;
}

.field label {
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 0.375rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.42858;
    color: var(--text-strong);
    user-select: none;
}

.input, .textarea {
    --focus: var(--blue);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 2.25rem;
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--grey-soft-text);
    background-color: var(--grey-soft);
    box-shadow: var(--shadow);
    cursor: text;
}

/* The ring a field gets while it is being typed in. */
.input::before, .textarea::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.input:focus-within::before, .textarea:focus-within::before {
    box-shadow: inset 0 0 0 2px var(--focus);
}

.input {
    padding-inline: 0.75rem;
}

.input.wrong {
    --focus: var(--red);
    color: var(--red-soft-text);
    background-color: var(--red-soft);
}

.input > .icon, .textarea > .icon {
    font-size: 1.5rem;
    color: var(--text-icon);
    cursor: initial;
}

.input > .icon {
    align-self: center;
    margin: 0 0.5rem 0 -0.1875rem;
}

.input input, .textarea textarea {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    outline: 0;
    color: inherit;
    background-color: transparent;
    font: inherit;
}

.input input {
    text-overflow: ellipsis;
}

.input input::placeholder, .textarea textarea::placeholder {
    color: inherit;
    opacity: 0.64;
}

.textarea {
    flex-direction: column;
    padding-block: 0.375rem;
    padding-inline-start: 0.75rem;
}

.textarea > .icon {
    margin: 0 0 0.5rem -0.375rem;
}

.textarea textarea {
    flex: auto;
    align-self: stretch;
    padding-inline-end: 0.75rem;
    resize: none;
}

.hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0.375rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1.42858;
    color: var(--red-light);
}

.feedback .send {
    width: 100%;
    margin-top: 8px;
}

/* ------------------------------------------------------- page not found */

.padded {
    padding: 8px;
}

/* The page for an address that is nothing: the address said back, so a
   typo can be seen for what it is. */
.lost code {
    color: var(--text-strong);
    overflow-wrap: anywhere;
}