/* Currency converter (/currency-converter): what is its own (the currency buttons and the searchable picker, flags and
   codes, the answer and the rate line). Panels, fields, buttons, the table and the colours come from the app kit
   (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* The favourite star: the app's own amber. */
.currency-landing-app {
    --cx-star: #f59e0b;
}

.dark .currency-landing-app > .filter-landing-controls,
.currency-landing-app[data-theme="dark"] > .filter-landing-stage {
    --cx-star: #fbbf24;
}

.currency-landing-app .cx-main,
.currency-landing-app .cx-other {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

.currency-landing-app .cx-main {
    gap: 0.8rem;
}

.currency-landing-app .cx-amount-wrap {
    max-width: 18rem;
}

.currency-landing-app input.ak-field.cx-amount:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* From [currency v] [star]   [swap]   To [currency v] [star] */
.currency-landing-app .cx-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.currency-landing-app .cx-side {
    position: relative;
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.currency-landing-app .cx-pick-row {
    display: flex;
    gap: 0.35rem;
}

.currency-landing-app .cx-pick {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
    min-height: 2.55rem;
    font-size: var(--ak-fs-md);
    font-weight: 400;
    text-align: start;
}

.currency-landing-app .cx-pick::after {
    content: "\25BE";
    margin-inline-start: auto;
    color: var(--ak-muted);
}

.currency-landing-app .cx-pick:hover,
.currency-landing-app .cx-pick[aria-expanded="true"],
.currency-landing-app .cx-swap:hover {
    border-color: var(--ak-accent);
}

.currency-landing-app .cx-fav,
.currency-landing-app .cx-swap {
    width: 2.55rem;
    min-width: 2.55rem;
    min-height: 2.55rem;
    color: var(--ak-muted);
    font-size: 1.05rem;
}

/* A favourite is a filled amber star, not the kit's pressed look. */
.currency-landing-app .cx-fav[aria-pressed="true"] {
    border-color: var(--ak-border);
    background: var(--ak-field);
    color: var(--cx-star);
}

.currency-landing-app .cx-swap {
    color: var(--ak-accent);
    font-size: 1.2rem;
}

.currency-landing-app .cx-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.currency-landing-app .cx-code {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--ak-hover);
    color: var(--ak-text);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.currency-landing-app .cx-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The searchable currency list, under the button that opened it. */
.currency-landing-app .cx-picker {
    position: absolute;
    z-index: 20;
    top: 100%;
    inset-inline: 0;
    margin-top: 0.3rem;
    padding: 0.5rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    background: var(--ak-bg);
    box-shadow: var(--ak-shadow-lg);
}

.currency-landing-app .cx-list {
    max-height: 16rem;
    margin: 0.4rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.currency-landing-app .cx-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border-radius: var(--ak-radius-sm);
    cursor: pointer;
}

.currency-landing-app .cx-option:hover,
.currency-landing-app .cx-option--active {
    background: var(--ak-hover);
}

.currency-landing-app .cx-option[aria-selected="true"] .cx-code {
    background: var(--ak-accent);
    color: var(--ak-on-accent);
}

.currency-landing-app .cx-opt-fav {
    display: inline-flex;
    margin-inline-start: auto;
    padding: 0.1rem;
    border: 0;
    background: none;
    color: var(--cx-star);
    font-size: 1rem;
    cursor: pointer;
}

/* The answer: the amount you get, in the green the money apps use for the result. */
.currency-landing-app .cx-answer {
    --ak-stat-color: var(--ak-series-3);
    justify-content: flex-start;
    gap: 0.1rem;
}

.currency-landing-app .cx-result-from {
    font-size: var(--ak-fs-md);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.currency-landing-app .cx-answer .cx-result {
    font-size: 2rem;
}

.currency-landing-app .cx-answer--invalid {
    --ak-stat-color: var(--ak-danger);
}

.currency-landing-app .cx-answer .cx-result--invalid {
    color: var(--ak-danger);
    font-size: var(--ak-fs-md);
    font-weight: 400;
}

.currency-landing-app .cx-rate {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.currency-landing-app .cx-rate-part {
    white-space: nowrap;
}

.currency-landing-app .cx-rate-sep {
    margin: 0 0.35rem;
    color: var(--ak-muted);
}

.currency-landing-app .cx-status.ak-note {
    font-weight: 400;
}

.currency-landing-app .cx-retry {
    align-self: flex-start;
}

/* The other currencies: all of them at once (no scroll box); a click (or Enter) on a row converts to that currency. */
.currency-landing-app .cx-other .ak-table-wrap {
    max-height: none;
}

.currency-landing-app .cx-table tbody tr {
    cursor: pointer;
}

.currency-landing-app .cx-table tbody tr:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: -2px;
}

.currency-landing-app .cx-cell-cur > * {
    vertical-align: middle;
}

.currency-landing-app .cx-cell-cur > * + * {
    margin-inline-start: 0.45rem;
}

.currency-landing-app .cx-star {
    color: var(--cx-star);
}

@container (max-width: 640px) {
    .currency-landing-app .cx-amount-wrap {
        max-width: none;
    }

    .currency-landing-app .cx-side {
        flex-basis: 100%;
    }

    /* The two currencies sit one above the other, so the swap arrows turn upright. */
    .currency-landing-app .cx-swap {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .currency-landing-app .cx-answer .cx-result {
        font-size: 1.6rem;
    }

    .currency-landing-app .cx-rate-part {
        display: block;
    }

    .currency-landing-app .cx-rate-sep {
        display: none;
    }
}

@container (max-width: 480px) {
    /* Flag and code name each row on a phone; the full name stays for screen readers. */
    .currency-landing-app .cx-table .cx-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .currency-landing-app .cx-table th,
    .currency-landing-app .cx-table td {
        padding-inline: 0.35rem;
    }
}