/*
 * Lesari: where an issue or a supplement is read in the browser (templates/issues/reader.html,
 * site/lesari/lesari.js), for every outlet in its own look.
 *
 * Three layers and nothing else:
 *   the ground   one quiet colour under everything: the bar, the sidebars and around the paper are
 *                one surface, told apart by room, not by lines, tints or panels;
 *   the paper    the pages, white, with the shadow paper has;
 *   surfaces     what is handled lifts off the ground, white with a soft shadow: the page dock
 *                below, the search field, the menu, the keys, the tip over the dock.
 * Controls are bare line icons (templates/issues/reader_icons.html); pointed at, a faint ground;
 * on, a chip of the text's colour, faint. What is chosen in a list is ringed, never filled.
 *
 * An outlet's look (templates/issues/reader_looks/<slug>.html, then the colours of its row) sets on
 * :root and :root[data-theme="dark"] what it has of --lesari-ground, -surface, -text, -main,
 * -accent, -mark, -logo and the -sans, -serif and -headline type. The --l-* are made from those
 * here, and nothing outside this file sets them. Dark where the reader chose the site's dark look
 * (localStorage "theme", as stundin.js keeps it).
 */
:root {
    --lesari-ground: hsl(60, 6%, 95%);
    --lesari-surface: #fff;
    --lesari-text: hsl(0, 0%, 8%);
    --lesari-main: #d60000;
    --lesari-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lesari-serif: Georgia, "Times New Roman", serif;
    --lesari-headline: var(--lesari-serif);
    --l-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0.5rem 1.75rem rgba(0, 0, 0, 0.09);
    --l-lift: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0.375rem 1.25rem rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
    --lesari-ground: hsl(0, 0%, 9%);
    --lesari-surface: hsl(0, 0%, 15%);
    --lesari-text: hsl(0, 0%, 95%);
    --l-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45);
    --l-lift: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

.lesari {
    --l-dim: color-mix(in srgb, var(--lesari-text) 55%, transparent);
    --l-hover: color-mix(in srgb, var(--lesari-text) 6%, transparent);
    --l-chip: color-mix(in srgb, var(--lesari-text) 11%, transparent);
    --l-accent: var(--lesari-accent, var(--lesari-text));
    --l-mark: var(--lesari-mark, hsla(40, 100%, 74%, 0.75));
    --l-logo: var(--lesari-logo, var(--lesari-text));
    --l-control: 2.25rem;
}

/* (Without color-mix, Safari before 16.2: the same weights in plain colours.) */
@supports not (color: color-mix(in srgb, red, blue)) {
    .lesari {
        --l-dim: rgba(0, 0, 0, 0.55);
        --l-hover: rgba(0, 0, 0, 0.06);
        --l-chip: rgba(0, 0, 0, 0.11);
    }

    :root[data-theme="dark"] .lesari {
        --l-dim: rgba(255, 255, 255, 0.55);
        --l-hover: rgba(255, 255, 255, 0.07);
        --l-chip: rgba(255, 255, 255, 0.13);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

/* Fixed to the window: the document itself never scrolls (a focused control can't slide the page aside). */
.lesari {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--lesari-ground);
    color: var(--lesari-text);
    font: 0.9375rem/1.4 var(--lesari-sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* (The page with its bars never zooms; two fingers on the paper zoom the paper: lesari.js.) */
    touch-action: pan-x pan-y;
}

.lesari [hidden] {
    display: none !important;
}

/* ---- the bar ---- */

.lesari__bar {
    position: relative;
    z-index: 9;
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.75rem;
    padding: 0 0.75rem 0 1rem;
}

.lesari__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.375rem 0.5rem 0.375rem 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--lesari-text);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.lesari__back:hover {
    background: var(--l-hover);
}

.lesari__back .lesari__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--l-dim);
}

/* The outlet's wordmark (its logo template: one path, no colour of its own). */
.lesari__logo {
    display: inline-flex;
    color: var(--l-logo);
}

.lesari__logo svg {
    display: block;
    height: 1.5rem;
    width: auto;
    fill: currentColor;
}

/* The number after the wordmark as the issue page has it: the headline's type, grey. */
.lesari__name {
    color: var(--l-dim);
    font: 700 1.25rem/1 var(--lesari-headline);
    letter-spacing: -0.01em;
}

.lesari__logo + .lesari__name {
    margin-left: -0.375rem;
}

.lesari__sub {
    flex: none;
    color: var(--l-dim);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lesari__spacer {
    flex: 1 1 0;
    min-width: 0.25rem;
}

.lesari__tools {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.lesari__group {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

/* ---- controls ---- */

.lesari__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: var(--l-control);
    height: var(--l-control);
    padding: 0 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--l-chip);
    color: var(--lesari-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s;
}

/* Icons (and the zoom's value) are bare till pointed at. */
.lesari__btn--icon,
.lesari__btn--value {
    background: transparent;
}

.lesari__btn--icon {
    width: var(--l-control);
    padding: 0;
}

.lesari__btn--value {
    min-width: 3.25rem;
    padding: 0 0.25rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.lesari__btn:hover {
    background: var(--l-hover);
}

.lesari__btn[aria-pressed="true"],
.lesari__btn[aria-expanded="true"] {
    background: var(--l-chip);
}

.lesari__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.lesari__btn:disabled:hover {
    background: transparent;
}

.lesari__icon {
    display: block;
    flex: none;
    width: 1.3125rem;
    height: 1.3125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lesari__btn:focus,
.lesari__back:focus,
.lesari__item:focus,
.lesari__thumb:focus,
.lesari__hit:focus,
.lesari__stage:focus {
    outline: none; /* (a ring for the keyboard only, below; the stage takes the keys and is not a control) */
}

.lesari__btn:focus-visible,
.lesari__back:focus-visible,
.lesari__turn:focus-visible,
.lesari__hit:focus-visible,
.lesari__item:focus-visible,
.lesari__thumb:focus-visible,
.lesari__scrub input:focus-visible {
    outline: 2px solid var(--l-accent);
    outline-offset: 2px;
}

/* ---- surfaces: the menu, the keys, the toast ---- */

.lesari__menu {
    position: absolute;
    top: calc(100% - 0.25rem);
    right: 0.75rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 15.5rem;
    padding: 0.375rem;
    border-radius: 0.75rem;
    background: var(--lesari-surface);
    box-shadow: var(--l-lift);
}

.lesari__menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lesari__menu .lesari__tools {
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.375rem;
}

.lesari__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--lesari-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lesari__item:hover {
    background: var(--l-hover);
}

.lesari__item .lesari__icon {
    color: var(--l-dim);
}

.lesari__item[aria-pressed="true"] .lesari__icon {
    color: var(--lesari-text);
    fill: currentColor;
}

.lesari__help {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.5rem 1.75rem;
    border: 0;
    border-radius: 0.875rem;
    background: var(--lesari-surface);
    box-shadow: var(--l-lift);
    color: var(--lesari-text);
    font: inherit;
}

.lesari__help::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.lesari__help h2 {
    margin: 0 0 1rem;
    font: 700 1.375rem/1.2 var(--lesari-headline);
}

.lesari__help dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1.5rem;
}

.lesari__help dt {
    color: var(--l-dim);
    font-weight: 700;
    white-space: nowrap;
}

.lesari__help dd {
    margin: 0;
}

.lesari__help form {
    margin: 0;
    text-align: right;
}

.lesari__toast {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    z-index: 11;
    max-width: calc(100vw - 2rem);
    padding: 0.625rem 1.125rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--lesari-text);
    color: var(--lesari-ground);
    font-weight: 600;
    text-align: center;
}

.lesari__noscript {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    margin: 0;
    padding: 1rem;
    background: var(--lesari-surface);
}

/* ---- the paper ---- */

.lesari__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.lesari__view {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.lesari__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    overflow: auto;
    padding-bottom: 4.5rem; /* (the dock's room) */
    /* (Pinching and double taps are the reader's own: lesari.js zooms the paper, not the page with its bars.) */
    touch-action: pan-x pan-y;
}

.lesari__stage.is-zoomed {
    cursor: grab;
}

.lesari__stage.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Centred while it fits, scrolled from its edge when bigger: auto margins, not align/justify. */
.lesari__spread {
    position: relative;
    flex: none;
    display: flex;
    margin: auto;
    padding: 0.5rem 1.5rem 1.5rem;
}

.lesari__page {
    position: relative;
    flex: none;
    background: #fff;
    box-shadow: var(--l-paper-shadow);
}

.lesari__page img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
}

.lesari__page.is-loading,
.lesari__page.is-failed {
    background: var(--lesari-surface);
}

.lesari__page.is-loading img,
.lesari__page.is-failed img {
    visibility: hidden;
}

.lesari__page.is-loading::after {
    content: attr(data-page);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--l-dim);
    font: 700 2rem/1 var(--lesari-headline);
}

.lesari__failed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--l-dim);
    text-align: center;
}

.lesari__mark {
    position: absolute;
    background: var(--l-mark);
    mix-blend-mode: multiply;
    border-radius: 2px;
    pointer-events: none;
}

.lesari__turn {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -2.75rem; /* (centred on the paper, above the dock's room) */
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--lesari-surface);
    color: var(--lesari-text);
    box-shadow: var(--l-lift);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.lesari__turn--prev {
    left: 1rem;
}

.lesari__turn--next {
    right: 1rem;
}

.lesari__view:hover .lesari__turn,
.lesari__turn:focus-visible {
    opacity: 1;
}

.lesari__turn:disabled {
    display: none;
}

/* ---- the dock: the way through the paper ---- */

.lesari__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    display: flex;
    justify-content: center;
    padding: 0 1rem 1rem;
    pointer-events: none;
}

.lesari__dock {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    width: min(40rem, 100%);
    padding: 0.3125rem 0.375rem;
    border-radius: 999px;
    background: var(--lesari-surface);
    box-shadow: var(--l-lift);
    pointer-events: auto;
}

.lesari__dock .lesari__btn--icon {
    border-radius: 999px;
}

.lesari__goto {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.25rem 0 0.375rem;
    color: var(--l-dim);
    font-size: 0.875rem;
    white-space: nowrap;
}

.lesari__goto label {
    display: none;
}

.lesari__goto input {
    width: 3.75rem;
    height: 2rem;
    padding: 0 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--lesari-text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: background-color 0.12s;
}

.lesari__goto input:hover,
.lesari__goto input:focus {
    background: var(--l-hover);
    outline: none;
}

.lesari__scrub {
    position: relative;
    flex: 1 1 auto;
    min-width: 3rem;
    display: flex;
    align-items: center;
    height: var(--l-control);
    margin: 0 0.5rem;
}

/* The audio bar's track (site/hlustun): a thin line in the text's colour, done to the dot. */
.lesari__scrub input {
    --done: 0%;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    color: var(--lesari-text);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.lesari__scrub input::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, currentColor var(--done), var(--l-chip) var(--done));
}

.lesari__scrub input::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, currentColor var(--done), var(--l-chip) var(--done));
}

.lesari__scrub input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}

.lesari__scrub input::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}

.lesari__tip {
    position: absolute;
    bottom: calc(100% + 1rem);
    width: 7.5rem;
    margin-left: -3.75rem;
    padding: 0.375rem 0.375rem 0.3125rem;
    border-radius: 0.625rem;
    background: var(--lesari-surface);
    box-shadow: var(--l-lift);
    color: var(--lesari-text);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    pointer-events: none;
}

.lesari__tip img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 13;
    margin-bottom: 0.25rem;
    object-fit: cover;
    border-radius: 2px;
    background: var(--lesari-ground);
}

/* ---- the sidebars: part of the ground, shown or hidden ---- */

.lesari__thumbs,
.lesari__search {
    flex: none;
    background: var(--lesari-ground);
}

.lesari__thumbs {
    width: 12.5rem;
    overflow-y: auto;
    padding: 0.25rem 1rem 5rem 1.25rem;
    scrollbar-width: thin;
}

/* A spread: its pages touching, as in the paper, with room round it; the one shown ringed. */
.lesari__thumb-spread {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0.75rem;
}

.lesari__thumb-pages {
    display: flex;
    justify-content: center;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline-color 0.12s;
}

.lesari__thumb-spread:hover .lesari__thumb-pages {
    outline-color: var(--l-chip);
}

.lesari__thumb-spread.is-current .lesari__thumb-pages {
    outline-color: var(--l-accent);
}

.lesari__thumb {
    display: block;
    width: 4.875rem;
    padding: 0;
    border: 0;
    background: #fff;
    cursor: pointer;
}

.lesari__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: var(--lesari-ratio, 0.667);
    object-fit: cover;
}

.lesari__thumb-label {
    color: var(--l-dim);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.lesari__thumb-spread.is-current .lesari__thumb-label {
    color: var(--lesari-text);
    font-weight: 700;
}

.lesari__search {
    width: 21rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The field lifts off the ground, as the dock does. */
.lesari__search form {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0.25rem 1rem 0.75rem 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.375rem;
    border-radius: 0.75rem;
    background: var(--lesari-surface);
    box-shadow: var(--l-lift);
}

.lesari__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2rem;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--lesari-text);
    font: inherit;
}

.lesari__search input::placeholder {
    color: var(--l-dim);
}

.lesari__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.lesari__search input:focus {
    outline: none;
}

/* Typing in it: a quiet ring, not a frame. */
.lesari__search form:focus-within {
    box-shadow: var(--l-lift), 0 0 0 2px var(--l-chip);
}

.lesari__status {
    margin: 0;
    padding: 0 1.5rem 0.5rem 1.25rem;
    color: var(--l-dim);
    font-size: 0.8125rem;
}

.lesari__hits {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 0.75rem 5rem 0.25rem;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

/* A hit as a teaser on the site: its page in small capitals, the text in the text's serif. */
.lesari__hit {
    display: block;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 0.625rem;
    background: none;
    color: var(--lesari-text);
    font: 0.9375rem/1.5 var(--lesari-serif);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s;
}

.lesari__hit:hover {
    background: var(--l-hover);
}

.lesari__hit.is-current {
    background: var(--l-chip);
}

.lesari__hit-page {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--l-dim);
    font: 700 0.6875rem/1.3 var(--lesari-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesari__hit mark {
    padding: 0 0.1em;
    border-radius: 2px;
    background: var(--l-mark);
    color: inherit;
}

/* ---- narrower ---- */

@media (max-width: 52rem) {
    .lesari__bar {
        height: 3.25rem;
        gap: 0.25rem;
        padding: 0 0.25rem 0 0.375rem;
    }

    .lesari__logo svg {
        height: 1.25rem;
    }

    .lesari__sub,
    .lesari__name,
    .lesari__edge,
    .lesari__view-group,
    .lesari__turn {
        display: none;
    }

    .lesari__spread {
        padding: 0.25rem 0.75rem 0.75rem;
    }

    .lesari__stage {
        padding-bottom: 4rem;
    }

    .lesari__foot {
        padding: 0 0.5rem 0.625rem;
    }

    /* Over the paper from their edge, lifted off it. */
    .lesari__thumbs,
    .lesari__search {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 8;
        box-shadow: var(--l-lift);
    }

    .lesari__thumbs {
        left: 0;
    }

    .lesari__search {
        right: 0;
        width: min(21rem, 100%);
    }
}

@media (hover: none) {
    .lesari__turn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesari * {
        transition: none !important;
    }
}