.site-name {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.search-group {
    max-width: 34rem;
}

/* Notes and the footer: small and light. */
.fine-print {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color);
}

.fine-print a {
    color: inherit;
}

/* Switching between the browser's lists, and renaming, adding and deleting them. */
.list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.list-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-switcher .form-select {
    width: auto;
    max-width: 100%;
}

.list-manage {
    margin-left: auto;
    font-size: 0.875rem;
}

.list-manage summary {
    cursor: pointer;
    color: var(--bs-secondary-color);
}

.list-manage-body {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
    min-width: min(20rem, 100%);
}

/* The country picker and, when there is a list to share, the share button at its right. */
.list-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.share-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto; /* at the right end, also when it has wrapped under the country picker */
}

/* What a search by name found: picture, name and a button, until one of them is picked. */
.search-match {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.search-match:last-child {
    border-bottom: 1px solid var(--bs-border-color);
}

.search-match img {
    object-fit: contain;
    background: #fff;
    border-radius: 0.25rem;
}

/* Pages that are only text, such as the privacy page: lines short enough to read comfortably. */
.prose {
    max-width: 44rem;
}

/* The footer: the small print on the left, the thank-you on the right; on phones one under the other. */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.coffee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.coffee-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: #2d2d2d;
    background: #ffdd00; /* the colour of the Buy Me a Coffee button */
    text-decoration: none;
}

.coffee-button:hover,
.coffee-button:focus-visible {
    color: #2d2d2d;
    background: #ffe74d;
}

.coffee-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* htmx: the spinner shows while its form's request runs. htmx's own inline styles are turned off. */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

/* With many countries the table can be wider than the window; then only the table scrolls. */
.item-table-scroll {
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    .item-table-scroll {
        overflow-x: visible;
    }
}

/* The list. On computers a striped table with some room between the rows. */
.item-table > :not(caption) > * > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.item-table thead th {
    --bs-table-bg: var(--bs-tertiary-bg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.item-table tfoot th,
.item-table tfoot td {
    border-top: 2px solid var(--bs-border-color);
    border-bottom: 0;
}

.item-table .col-image {
    width: 72px;
}

.item-table img,
.item-image {
    object-fit: contain;
    background: #fff;
    border-radius: 0.25rem;
}

.item-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.item-table .col-price,
.item-table .col-actions {
    text-align: right;
    white-space: nowrap;
}

/* Prices lead to the store's page but read as plain numbers. */
.item-table .price a {
    color: inherit;
    text-decoration: none;
}

.item-name:hover,
.item-table .price a:hover {
    text-decoration: underline;
}

.item-table .amount {
    font-size: 1.0625rem;
}

.cheapest .amount {
    padding: 0.05rem 0.4rem;
    border-radius: 0.375rem;
    font-weight: 700;
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.item-table .local {
    font-size: 0.8125rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
}

.item-table tr.highlight > * {
    animation: highlight 2.5s ease-out;
}

@keyframes highlight {
    from {
        background-color: var(--bs-warning-bg-subtle);
    }
}

/* Phones: every item becomes a framed card and each price gets its country as a label. */
@media (max-width: 767.98px) {
    .item-table thead {
        display: none;
    }

    .item-table,
    .item-table tbody,
    .item-table tfoot {
        display: block;
    }

    .item-table tr {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .item-table tbody tr {
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
    }

    .item-table tfoot tr {
        background: var(--bs-tertiary-bg);
    }

    .item-table > :not(caption) > * > * {
        display: block;
        padding: 0;
        border: 0;
        /* Cards are told apart by their frames; no stripes or hover shading inside them. */
        --bs-table-bg: transparent;
        --bs-table-bg-type: transparent;
        --bs-table-bg-state: transparent;
    }

    .item-table .col-price {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-top: 0.25rem;
    }

    .item-table .col-price::before {
        content: attr(data-label);
        color: var(--bs-secondary-color);
        font-weight: normal;
    }

    .item-table .col-actions,
    .item-table .col-total {
        grid-column: 1 / -1;
        padding-top: 0.5rem;
    }

    .item-table .col-total {
        text-align: left;
    }

    .item-table tfoot th,
    .item-table tfoot td {
        border-top: 0;
    }

    .item-table tfoot td:empty {
        display: none;
    }
}

/* Barcode scanner */
.scanner {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    color: #fff;
    background: rgb(0 0 0 / 90%);
}

.scanner[hidden] {
    display: none;
}

.scanner-frame {
    position: relative;
    width: min(100%, 36rem);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #000;
}

.scanner-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-guide {
    position: absolute;
    inset: 35% 10%;
    border: 2px solid rgb(255 255 255 / 80%);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 35%);
}

.scanner-status {
    margin: 0;
    text-align: center;
}

.scanner-buttons {
    display: flex;
    gap: 0.5rem;
}

/* The item page */
.history-chart {
    position: relative;
    height: 18rem;
}

/* The footer's list of languages: the one in use is plain text, the others are links. */
.language-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 0.25rem;
}

/* "I live in": the country the comparison starts from. */
.home-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.75rem;
}

.home-picker .form-select {
    width: auto;
    max-width: 100%;
}

/* What the list costs in a country compared with home: green where it is cheaper, red where it is dearer. */
.item-table tfoot .difference-row th,
.item-table tfoot .difference-row td {
    border-top: 1px solid var(--bs-border-color);
}

.difference.less {
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

.difference.more {
    color: var(--bs-danger-text-emphasis);
}

@media (max-width: 767.98px) {
    .item-table tfoot .difference-row th,
    .item-table tfoot .difference-row td {
        border-top: 0;
    }

    /* A cell without a difference (home itself, or an incomplete total) has nothing to show on a card. */
    .item-table .difference-row .no-difference {
        display: none;
    }
}