/*
 The web reader. A shared story, set the way the app sets it: the reader picks
 the typeface, the size, the spacing and the page colour, and the page does what
 they asked on whatever they are holding.

 The colours are the app's own light and dark themes, so a story looks the same
 on a phone browser as it does in the app on the same phone.
*/

/* The reader is served on its own, without the workspace's stylesheets behind
   it, so it cannot lean on Bootstrap for this. Without it every height here is
   a content height with the padding added on top, and the column of story text
   ends up taller than the window it is being read in. */
html[data-reader-theme] *,
html[data-reader-theme] *::before,
html[data-reader-theme] *::after {
    box-sizing: border-box;
}

/* The same goes for these: a button does not take the page's typeface on its
   own, and the reading options are made of buttons. Element selectors only, so
   anything with a class of its own still wins. */
button,
input {
    font-family: inherit;
    line-height: inherit;
}

html[data-reader-theme] {
    --reader-page: #FFFFFF;
    --reader-ink: #4F5355;
    --reader-heading: #274555;
    --reader-muted: #73858F;
    --reader-chrome: rgba(255, 255, 255, 0.94);
    --reader-line: #E3E7EA;
    --reader-control: #E9ECEE;
    --reader-control-ink: #274555;
    --reader-accent: #C25719;
    --reader-on-accent: #FFFFFF;

    --reader-bar-height: 52px;
    --reader-pager-height: 56px;
    --reader-column-gap: 48px;
    --reader-measure: 40rem;
}

html[data-reader-theme="dark"] {
    --reader-page: #0A0A0A;
    --reader-ink: #B0A8A3;
    --reader-heading: #F0DFD8;
    --reader-muted: #8D8379;
    --reader-chrome: rgba(10, 10, 10, 0.94);
    --reader-line: #2A2626;
    --reader-control: #1C1A19;
    --reader-control-ink: #F0DFD8;
    --reader-accent: #C25719;
    --reader-on-accent: #FFFFFF;
}

/* The page colour belongs to the window, not to a box inside it, so there is no
   white strip left over past the end of a short story. */
html[data-reader-theme] body {
    background-color: var(--reader-page);
    color: var(--reader-ink);
    margin: 0;
    /* The chrome around the story: the bar, the pager, the sheets. The story
       itself is set in whatever the reader chose, further down. */
    font-family: 'Roboto', sans-serif;
}

html[data-reader-theme] body a {
    color: var(--reader-heading);
}

/* Pages mode turns the window itself into the book, so the window stops
   scrolling and the columns do the moving. */
html[data-reader-mode="pages"],
html[data-reader-mode="pages"] body {
    overflow: hidden;
    height: 100%;
}

.reader-root {
    min-height: 100vh;
    background-color: var(--reader-page);
    color: var(--reader-ink);
}

/* Top bar */

.reader-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--reader-bar-height);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    background-color: var(--reader-chrome);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--reader-line);
    z-index: 1040;
}

.reader-bar-logo img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
}

.reader-bar-title {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--reader-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reader-icon-button {
    min-width: 40px;
    height: 40px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    color: var(--reader-control-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.reader-icon-button:hover,
.reader-icon-button:focus-visible {
    background-color: var(--reader-control);
}

.reader-icon-button[disabled] {
    opacity: 0.4;
    cursor: default;
}

.reader-icon-button .reader-icon-label {
    display: none;
}

/* Open in app, in the top bar. Hidden until open-in-app.js says this is a
   phone, since on a computer there is no app to open. */
.reader-open-app {
    display: none;
}

html.can-open-app[data-reader-theme] body a.reader-open-app {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 0.75rem;
    margin-right: 0.25rem;
    border-radius: 999px;
    background-color: var(--reader-accent);
    color: var(--reader-on-accent);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

@media (min-width: 600px) {
    .reader-icon-button .reader-icon-label {
        display: inline;
    }
}

/* Progress */

.reader-progress {
    position: fixed;
    top: var(--reader-bar-height);
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--reader-line);
    z-index: 1040;
}

#reader-progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--reader-accent);
    transition: width 120ms linear;
}

/* The story */

.reader-viewport {
    max-width: var(--reader-measure);
    margin: 0 auto;
    padding: calc(var(--reader-bar-height) + 1.5rem) 1.25rem 4rem;
}

html[data-reader-mode="pages"] .reader-viewport {
    height: 100vh;
    height: 100dvh;
    padding-bottom: var(--reader-pager-height);
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

html[data-reader-mode="pages"] .reader-content {
    height: 100%;
    column-gap: var(--reader-column-gap);
    transition: transform 180ms ease-out;
    will-change: transform;
}

.reader-content {
    font-family: var(--reader-font-family);
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: var(--reader-ink);
}

/* Story intro */

.reader-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Opening a story in pages gives you three things in turn, the way the app
   does: the cover, then what the story is and who wrote it, then the story.
   Scrolling runs them together, which is what scrolling is for. */
html[data-reader-mode="pages"] .reader-cover-page {
    /* A real height, not a minimum one: the cover's max-height below is a
       percentage of this, and a percentage of a minimum is nothing at all, so
       a tall cover would draw at full width and run under the pager. */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    -webkit-column-break-after: always;
    break-after: column;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

/* Whatever shape the cover is, it has to fit the page it is on. */
html[data-reader-mode="pages"] .reader-cover-page .reader-cover {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* A flex item will not shrink below its natural size by default, which
       would undo the two limits above for a large image. */
    min-width: 0;
    min-height: 0;
    margin: 0;
}

html[data-reader-mode="pages"] .reader-intro {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    -webkit-column-break-after: always;
    break-after: column;
}

.reader-cover {
    width: 11rem;
    max-width: 60%;
    border-radius: 1rem;
    display: block;
    margin: 0 auto 1.25rem;
}

.reader-title {
    font-size: 1.6em;
    line-height: 1.25;
    color: var(--reader-heading);
    margin: 0 0 0.5rem;
}

.reader-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.reader-genre {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
}

.reader-blurb {
    font-size: 0.95em;
    color: var(--reader-muted);
    margin: 0 auto 1.25rem;
    max-width: 32rem;
}

.reader-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.reader-byline img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.reader-byline-name {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--reader-heading);
}

/* The byline opens the author's page. It reads as a name, not a link, until
   somebody points at it. */
html[data-reader-theme] body a.reader-byline {
    text-decoration: none;
}

a.reader-byline:hover .reader-byline-name,
a.reader-byline:focus-visible .reader-byline-name {
    text-decoration: underline;
}

.reader-meta {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    color: var(--reader-muted);
}

.reader-rule {
    border: none;
    border-top: 1px solid var(--reader-line);
    margin: 2rem auto;
    width: 4rem;
}

/* Chapters */

.reader-chapter-heading {
    font-size: 1.35em;
    color: var(--reader-heading);
    text-align: center;
    margin: 2.5rem 0 1.5rem;
}

html[data-reader-mode="pages"] .reader-chapter-heading {
    break-before: column;
    margin-top: 0;
}

.reader-chapter {
    text-align: var(--reader-text-align);
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* The app draws paragraphs with no margin and leans on the blank line the
   editor writes between them, so the web does the same and a story breaks in
   the same places on both. */
.reader-chapter p {
    margin: 0;
    padding: 0;
}

.reader-chapter img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.reader-chapter h1,
.reader-chapter h2,
.reader-chapter h3 {
    color: var(--reader-heading);
    line-height: 1.3;
}

/* Age gate */

.reader-gate {
    max-width: 30rem;
    margin: 3rem auto;
    padding: 1.5rem;
    border: 1px solid var(--reader-line);
    border-radius: 1rem;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
}

.reader-gate img {
    max-width: 12rem;
    margin-bottom: 1rem;
}

.reader-gate-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.25rem;
}

/* End of story */

.reader-end {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;
}

/* Turning the last page should land on the end of the story, not on whatever
   was left over after the last paragraph. It gets a page of its own, and stays
   on it: the thanks and the buttons under it are one thing to read, not two
   halves either side of a page turn. */
html[data-reader-mode="pages"] .reader-end {
    -webkit-column-break-before: always;
    break-before: column;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin-top: 0;
    padding-top: 2rem;
}

/* The rule is there to put a line between the story and the end of it. On a
   page of its own there is nothing above it to divide, so it goes. */
html[data-reader-mode="pages"] .reader-end .reader-rule {
    display: none;
}

.reader-end p {
    color: var(--reader-muted);
    font-size: 0.95rem;
}

/* Flex rather than inline links: the whitespace around each img inside its
   <a> otherwise renders as an underlined space, which shows up as a stray
   line between the two badges. */
.reader-store-buttons {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.reader-store-buttons a {
    display: block;
    text-decoration: none;
}

.reader-store-buttons img {
    display: block;
    width: 11rem;
    margin: 0.25rem;
}

/* More by the author, after the end of the story */

.reader-more {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 2.5rem;
}

/* A page of its own after the end, so the end keeps its page whole. */
html[data-reader-mode="pages"] .reader-more {
    -webkit-column-break-before: always;
    break-before: column;
    margin-top: 0;
    padding-top: 2rem;
}

.reader-more-heading {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--reader-heading);
    margin: 0 0 1rem;
}

/* The cards themselves are the author page's, from author.css. */
.reader-more .author-story-list {
    text-align: left;
    margin-bottom: 1.25rem;
}

/* Buttons */

.reader-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
}

.reader-button-primary {
    background-color: var(--reader-accent);
    color: var(--reader-on-accent);
}

html[data-reader-theme] body a.reader-button-primary {
    color: var(--reader-on-accent);
}

/* Pager */

.reader-pager {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--reader-pager-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 1rem;
    background-color: var(--reader-chrome);
    border-top: 1px solid var(--reader-line);
    z-index: 1040;
}

#reader-page-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: var(--reader-muted);
    min-width: 6rem;
    text-align: center;
}

/* The page number is the way to the slider, so it has to look like something
   you can press without shouting about it. */
.reader-page-jump {
    height: 36px;
    padding: 0 0.75rem;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    cursor: pointer;
}

.reader-page-jump:hover,
.reader-page-jump:focus-visible {
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
}

/* Jump to a page */

.reader-jump {
    position: fixed;
    bottom: var(--reader-pager-height);
    left: 0;
    right: 0;
    display: none;
    padding: 0.75rem 1.25rem;
    background-color: var(--reader-chrome);
    border-top: 1px solid var(--reader-line);
    z-index: 1040;
}

.reader-jump.is-open {
    display: block;
}

#reader-page-range {
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--reader-accent);
    cursor: pointer;
}

/* Turning a page at a time is worth animating. Dragging across thirty of them
   is not, so the slide comes off while the slider is up. */
html[data-reader-seeking] .reader-content {
    transition: none;
}

/* Reading options */

/* The sheets are in the page from the start and hidden, rather than being put
   there when they are opened: nothing to build, nothing to wait for. */
.reader-sheet[hidden],
.reader-scrim[hidden],
.reader-jump[hidden] {
    display: none;
}

.reader-scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1200;
}

.reader-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    background-color: var(--reader-page);
    color: var(--reader-ink);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    font-family: 'Roboto', sans-serif;
    z-index: 1201;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

/* On a wider screen a sheet stuck to the bottom edge is a long way from the
   button that opened it, so it sits by the bar instead. */
@media (min-width: 900px) {
    .reader-sheet {
        left: auto;
        right: 1.5rem;
        bottom: auto;
        top: calc(var(--reader-bar-height) + 0.75rem);
        width: 24rem;
        max-height: calc(100vh - var(--reader-bar-height) - 2.5rem);
        border-radius: 1rem;
    }
}

.reader-sheet-grab {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--reader-line);
    margin: 0 auto 0.75rem;
}

@media (min-width: 900px) {
    .reader-sheet-grab {
        display: none;
    }
}

.reader-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.reader-sheet-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--reader-heading);
}

.reader-sheet-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.reader-section-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--reader-heading);
    margin: 1rem 0 0.5rem;
}

.reader-divider {
    border: none;
    border-top: 1px solid var(--reader-line);
    margin: 0.75rem 0 0;
}

.reader-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.reader-option-row-text {
    flex: 1;
    min-width: 0;
}

.reader-option-name {
    display: block;
    font-size: 1rem;
    color: var(--reader-heading);
}

.reader-option-description {
    display: block;
    font-size: 0.8rem;
    color: var(--reader-muted);
}

.reader-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--reader-muted);
    flex: 0 0 auto;
    position: relative;
}

.reader-radio-selected {
    border-color: var(--reader-accent);
}

.reader-radio-selected::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background-color: var(--reader-accent);
}

.reader-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.reader-stepper button {
    width: 64px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.reader-stepper button[disabled] {
    opacity: 0.4;
    cursor: default;
}

.reader-chip-row {
    display: flex;
    gap: 0.5rem;
}

.reader-chip {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.reader-chip-selected {
    background-color: var(--reader-accent);
    color: var(--reader-on-accent);
}

.reader-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.25rem;
}

.reader-switch {
    width: 50px;
    height: 30px;
    flex: 0 0 auto;
    border: none;
    border-radius: 15px;
    background-color: var(--reader-muted);
    position: relative;
    cursor: pointer;
}

.reader-switch-on {
    background-color: var(--reader-accent);
}

.reader-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--reader-page);
    transition: transform 120ms ease-out;
}

.reader-switch-on::after {
    transform: translateX(20px);
}

/* Chapter list */

.reader-chapter-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.reader-chapter-list button {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 10px;
    background-color: var(--reader-control);
    color: var(--reader-control-ink);
    font-size: 0.95rem;
    cursor: pointer;
}

/* A story that is not there */

.reader-missing {
    max-width: 30rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: var(--reader-ink);
}

.reader-missing h1 {
    font-size: 1.5rem;
    color: var(--reader-heading);
    margin-bottom: 1rem;
}

.reader-missing p {
    margin-bottom: 2rem;
}