:root {
    color-scheme: light dark;
    --ink: #1c1b18;
    --muted: #6b6862;
    --ground: #faf8f4;
    --panel: #ffffff;
    --line: #e3ded4;
    --accent: #2f5d3f;
    --danger: #8a2b1e;
    --already-linked: #2f5480;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #ece8e0;
        --muted: #9a958c;
        --ground: #17181a;
        --panel: #202225;
        --line: #33363a;
        --accent: #7fb894;
        --danger: #e08d7e;
        --already-linked: #8fb2e0;
    }
}

body {
    margin: 0;
    padding: 2.5rem 1.25rem;
    background: var(--ground);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap {
    max-width: 44rem;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}

.page-header .logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

h1 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -.015em;
}

.lede {
    margin: 0 0 1.75rem;
    color: var(--muted);
}

.picker {
    padding: 1.5rem;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.options {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .9rem;
    font-size: .92rem;
}

.options label {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    cursor: pointer;
}

.thumbnail {
    margin-top: 1.25rem;
}

.thumbnail-frame {
    position: relative;
    display: inline-block;
    max-width: 400px;
    width: 100%;
}

.thumbnail img {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.finding-box {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 3px;
    pointer-events: none;
}

.finding-box.already-linked {
    border-color: var(--already-linked);
}

.finding-letter {
    position: absolute;
    top: -.9rem;
    left: -2px;
    padding: 0 .3rem;
    border-radius: 3px;
    background: var(--accent);
    color: var(--ground);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
}

.finding-box.already-linked .finding-letter {
    background: var(--already-linked);
}

.thumbnail-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .6rem;
    max-width: 400px;
    color: var(--muted);
    font-size: .85rem;
}

.thumbnail-nav button {
    padding: .3rem .6rem;
    font-size: .82rem;
}

.thumbnail-nav button:disabled {
    opacity: .4;
    cursor: default;
}

.status {
    margin-top: 1.25rem;
    color: var(--muted);
}

.status p {
    margin: .4rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Restyled rather than left native: the default bar is a different shape,
   colour and height in every browser, and doesn't follow color-scheme. */
.status progress {
    display: block;
    width: 100%;
    max-width: 400px;
    height: .5rem;
    border: 0;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.status progress::-webkit-progress-bar {
    background: var(--line);
    border-radius: 999px;
}

.status progress::-webkit-progress-value {
    background: var(--accent);
    border-radius: 999px;
    transition: width .2s ease-out;
}

.status progress::-moz-progress-bar {
    background: var(--accent);
    border-radius: 999px;
}

/* Indeterminate (no value): sweep a short segment across, since the
   WebKit/Firefox built-in indeterminate animations are lost once the
   pseudo-elements above are overridden. */
.status progress:indeterminate {
    background: linear-gradient(90deg, var(--line) 0 30%, var(--accent) 30% 55%, var(--line) 55% 100%);
    background-size: 250% 100%;
    animation: status-sweep 1.2s linear infinite;
}

.status progress:indeterminate::-webkit-progress-bar {
    background: transparent;
}

.status progress:indeterminate::-moz-progress-bar {
    background: transparent;
}

@keyframes status-sweep {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .status progress:indeterminate {
        animation: none;
        background: var(--line);
    }
}

.result,
.error {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.error {
    border-color: var(--danger);
}

.count {
    margin: 0 0 .75rem;
    font-weight: 600;
}

ul.links {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.links li {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: .4rem 0;
    border-top: 1px solid var(--line);
}

ul.links li:first-child {
    border-top: 0;
}

.letter {
    flex: 0 0 auto;
    min-width: 1.2rem;
    padding: 0 .3rem;
    border-radius: 3px;
    background: var(--accent);
    color: var(--ground);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
}

ul.links.already-linked .letter {
    background: var(--already-linked);
}

.page {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

ul.links a {
    color: var(--accent);
    word-break: break-all;
}

ul.links.already-linked a {
    color: var(--already-linked);
}

.already-linked-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.1rem;
}

button {
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .92rem;
    cursor: pointer;
}

button.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ground);
    font-weight: 600;
}

.log {
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: .88rem;
}

.log pre {
    overflow-x: auto;
    padding: .75rem;
    border-radius: 7px;
    background: var(--panel);
    font-size: .8rem;
}

.booting {
    color: var(--muted);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: .8rem 1.25rem;
    background: var(--danger);
    color: #fff;
}

/* Sits outside .wrap (it's outside Bolero's root so it survives boot), so it
   repeats .wrap's centring to line up with the content above it. */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.badges a {
    display: inline-flex;
    /* Reserve the row's height so it doesn't reflow as the three images
       arrive - these are the page's only external requests. */
    min-height: 20px;
}

.badges img {
    height: 20px;
}