/* HearthCake design system: a small prayer journal. See docs/Design-System.md. */

:root {
    /* The habit */
    --hc-table: #3A281C;
    --hc-habit: #4A3324;
    --hc-ink: #2B1D14;
    --hc-walnut: #6B5443;

    /* The mantle */
    --hc-paper: #FBF7EC;
    --hc-mantle: #F1E8D5;
    --hc-aged: #EBE1CB;
    --hc-deckle: #D9CBAE;
    --hc-edge: #BFAE8E;
    --hc-rule: #E2D6BC;

    /* The accents */
    --hc-rubric: #8E2F3C;
    --hc-marian: #3A5673;
    --hc-gilt: #A9853F;
    --hc-gilt-ink: #7C5F26;

    /* Type */
    --hc-font-book: 'EB Garamond', Garamond, 'Times New Roman', serif;
    --hc-font-hand: 'La Belle Aurore', 'Segoe Script', cursive;

    /* Every line of text sits on the same spacing as the ruled page. */
    --hc-line: 2rem;
    --hc-touch: 2.75rem;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--hc-table);
}

body {
    margin: 0;
    color: var(--hc-ink);
    font-family: var(--hc-font-book);
    font-size: 1.25rem;
    line-height: var(--hc-line);
}

h1, h2, h3 {
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
}

h1 {
    font-size: 2.125rem;
    line-height: 2.5rem;
}

h2 {
    font-size: 1.625rem;
    line-height: var(--hc-line);
    font-style: italic;
    color: var(--hc-habit);
}

h3 {
    font-size: 1.375rem;
    line-height: var(--hc-line);
    color: var(--hc-habit);
}

/* FocusOnNavigate moves focus to the h1 on each page. That focus isn't a keyboard stop. */
h1:focus {
    outline: none;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: var(--hc-marian);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--hc-rubric);
}

:focus-visible {
    outline: 2px solid var(--hc-marian);
    outline-offset: 2px;
    border-radius: 2px;
}

code {
    font-size: 0.9em;
}

/* Rubric: dates and labels, in rose small caps. */
.rubric {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--hc-rubric);
}

/* A blank ruled notebook page. */
.ruled {
    min-height: 20rem;
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--hc-rule) calc(100% - 1px));
    background-size: 100% var(--hc-line);
}

/* Marginal hand: a few words only. */
.hand {
    font-family: var(--hc-font-hand);
    font-size: 1.5rem;
    line-height: var(--hc-line);
    color: var(--hc-habit);
}

/* Holy card: laid on the page, one per page. */
.holy-card {
    flex: none;
    padding: 6px;
    background: var(--hc-mantle);
    border: 1px solid var(--hc-deckle);
    box-shadow: 0 2px 5px rgba(20, 12, 8, 0.3);
    transform: rotate(-2deg);
}

.holy-card img {
    display: block;
    width: 8.25rem;
    height: auto;
}

/* A list of entries. */
.entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-list li {
    padding: 1rem 0;
    border-top: 1px solid var(--hc-deckle);
}

.entry-list li:last-child {
    border-bottom: 1px solid var(--hc-deckle);
}

.entry-title {
    font-size: 1.5rem;
    line-height: var(--hc-line);
}

/* A prayer or quotation set apart. */
.prayer {
    margin: 0;
    padding: 1.5rem 2rem;
    border-block: 1px solid var(--hc-gilt);
    font-size: 1.375rem;
    font-style: italic;
    text-align: center;
    color: var(--hc-habit);
}

/* Feast or season label. */
.feast {
    display: inline-block;
    padding: 0.125rem 0.75rem;
    border: 1px solid var(--hc-rubric);
    border-radius: 2px;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--hc-rubric);
}

/* Buttons */
.button {
    min-height: var(--hc-touch);
    padding: 0 1.5rem;
    border: 1px solid var(--hc-habit);
    border-radius: 2px;
    background: var(--hc-habit);
    color: var(--hc-paper);
    font: inherit;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.button:hover {
    background: var(--hc-table);
}

.button-secondary {
    background: var(--hc-paper);
    color: var(--hc-habit);
}

.button-secondary:hover {
    background: var(--hc-mantle);
}

/* Form field: written on a ruled line. */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field label {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--hc-walnut);
}

.field input {
    height: var(--hc-touch);
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--hc-habit);
    background: transparent;
    color: var(--hc-ink);
    font: inherit;
}

.field input::placeholder {
    color: var(--hc-walnut);
}

.field textarea {
    padding: 0.5rem;
    border: 1px solid var(--hc-deckle);
    border-radius: 2px;
    background: transparent;
    color: var(--hc-ink);
    font: inherit;
    resize: vertical;
}

.field-help {
    font-size: 1.0625rem;
    line-height: 1.5rem;
    color: var(--hc-walnut);
}

/* Off-screen rather than display:none, which some bots check for. */
.field-trap {
    position: absolute;
    left: -9999px;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 24rem;
}

.form-wide {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* A published post. */
.post-body {
    overflow-wrap: anywhere;
}

.post-body > * + * {
    margin-top: 1rem;
}

/* Old posts contain empty tags left by browser extensions and pasted email. They shouldn't leave gaps. */
.post-body div:empty,
.post-body span:empty {
    display: none;
}

.post-body img {
    max-width: 100%;
    height: auto;
}

.post-body blockquote {
    margin-inline: 1.5rem 0;
    padding-left: 1rem;
    border-left: 1px solid var(--hc-gilt);
    font-style: italic;
}

.title-link {
    color: inherit;
    text-decoration: none;
}

.title-link:hover {
    color: var(--hc-rubric);
}

/* Post card: the date, the words, who said them, and what they're about. */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.post-card-title.is-date {
    font-size: 1.25rem;
    font-style: normal;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--hc-rubric);
}

h1.post-card-title.is-date {
    font-size: 1.5rem;
    line-height: var(--hc-line);
}

/* An illuminated initial, two ruled lines tall. */
.quote > p:first-child::first-letter {
    float: left;
    margin: 0.3rem 0.1875rem 0 0;
    font-size: 3.75rem;
    line-height: 3.25rem;
    color: var(--hc-rubric);
}

.attribution {
    align-self: flex-end;
    font-style: italic;
    color: var(--hc-walnut);
    text-align: right;
}

.attribution a {
    color: var(--hc-habit);
    text-decoration: none;
}

.attribution a:hover {
    color: var(--hc-rubric);
    text-decoration: underline;
}

.post-cards {
    display: flex;
    flex-direction: column;
}

.post-cards > .post-card {
    position: relative;
    padding-block: 2rem;
}

.post-cards > .post-card:first-child {
    padding-top: 1rem;
}

/* A gilt diamond on the rule between two entries. */
.post-cards > .post-card + .post-card {
    border-top: 1px solid var(--hc-deckle);
}

.post-cards > .post-card + .post-card::before {
    content: "";
    position: absolute;
    top: -0.3125rem;
    left: 50%;
    width: 0.5625rem;
    height: 0.5625rem;
    background: var(--hc-gilt);
    outline: 0.25rem solid var(--hc-paper);
    transform: translateX(-50%) rotate(45deg);
}

/* Highlighter swipes: a tag marked in the margin with a felt pen. The ink is a separate layer, so it can
   lean and taper like a real stroke without taking the text with it. */
.swipes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.swipe {
    --swipe-ink: #F7E48A;
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--hc-touch);
    padding: 0 0.75rem;
    color: var(--hc-ink);
    font-size: 1.0625rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.swipe::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.5rem 0;
    border-radius: 0.65rem 0.2rem 0.7rem 0.25rem / 0.35rem 0.7rem 0.3rem 0.6rem;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.28), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.22)),
        linear-gradient(to right, transparent, var(--swipe-ink) 0.4rem, var(--swipe-ink) calc(100% - 0.3rem), transparent);
    mix-blend-mode: multiply;
    transform: rotate(-0.8deg) skewX(-7deg);
}

li:nth-child(even) > .swipe::before {
    transform: rotate(0.6deg) skewX(-4deg);
}

li:nth-child(3n) > .swipe::before {
    inset-block: 0.5625rem 0.4375rem;
    transform: rotate(-0.3deg) skewX(-9deg);
}

a.swipe:hover {
    color: var(--hc-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.swipe[aria-current]::before {
    outline: 1px solid var(--hc-habit);
    outline-offset: 1px;
}

.swipe-0 { --swipe-ink: #F7E48A; }
.swipe-1 { --swipe-ink: #F5BFC6; }
.swipe-2 { --swipe-ink: #C7E6AE; }
.swipe-3 { --swipe-ink: #BBDCEF; }
.swipe-4 { --swipe-ink: #F9D09A; }
.swipe-5 { --swipe-ink: #D9C8EE; }

.swipe-count {
    font-size: 0.9375rem;
    font-variant-numeric: oldstyle-nums;
    color: var(--hc-walnut);
}

/* The thumb index: year tabs cut into the fore-edge of the book. */
.thumb-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.thumb-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    min-height: var(--hc-touch);
    padding: 0 0.5rem;
    border: 1px solid var(--hc-edge);
    border-radius: 2px 5px 5px 2px;
    background: var(--hc-aged);
    color: var(--hc-habit);
    font-size: 1.0625rem;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.thumb-tab:nth-child(even) {
    background: var(--hc-mantle);
}

.thumb-tab:hover {
    color: var(--hc-rubric);
}

.thumb-tab[aria-current] {
    border-color: var(--hc-rubric);
    background: var(--hc-paper);
    color: var(--hc-rubric);
    font-weight: 500;
}

/* Before a year is chosen, the date panel below already lists them all. */
@media (max-width: 65.99rem) {
    .thumb-index.is-browsing {
        display: none;
    }
}

@media (min-width: 66rem) {
    /* Past the edge of the leaf, stepping down the side of the book. */
    .thumb-index {
        position: absolute;
        top: 3.5rem;
        left: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .thumb-tab {
        justify-content: flex-start;
        width: 4rem;
        padding-left: 0.875rem;
        border-left: 0;
        border-radius: 0 5px 5px 0;
        transition: width 120ms ease-out;
    }

    .thumb-tab:hover {
        width: 4.375rem;
    }

    /* The chosen tab joins the page, covering its stacked edges. */
    .thumb-tab[aria-current] {
        width: 4.625rem;
        margin-left: -0.375rem;
        padding-left: 1.25rem;
        border-color: var(--hc-edge);
    }
}

@media (prefers-reduced-motion: reduce) {
    .thumb-tab {
        transition: none;
    }
}

/* The index card: book tabs standing on a divider page. */
.book-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.25rem;
    padding-inline: 0.75rem;
}

.book-tab {
    display: inline-flex;
    align-items: center;
    min-height: var(--hc-touch);
    margin-bottom: -1px;
    padding: 0 clamp(0.625rem, 3vw, 1.25rem);
    border: 1px solid var(--hc-deckle);
    border-radius: 5px 5px 0 0;
    background: var(--hc-aged);
    color: var(--hc-habit);
    font-size: 1.125rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
}

.book-tab:hover {
    color: var(--hc-rubric);
}

@media (max-width: 30rem) {
    .book-tabs {
        padding-inline: 0.25rem;
    }

    .book-tab {
        flex: 1;
        justify-content: center;
        padding-inline: 0.25rem;
        font-size: 1.0625rem;
        letter-spacing: 0.06em;
    }
}

.book-tab[aria-current] {
    border-bottom-color: var(--hc-mantle);
    background: var(--hc-mantle);
    color: var(--hc-rubric);
    font-weight: 500;
}

.tab-panel {
    padding: 1rem;
    border: 1px solid var(--hc-deckle);
    border-radius: 5px;
    background: var(--hc-mantle);
}

.is-empty {
    opacity: 0.5;
}

/* Page flags: little paper markers for months. */
.page-flags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-flags a,
.page-flags > li > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-height: var(--hc-touch);
    padding: 0 0.625rem;
    border-left: 3px solid var(--hc-gilt);
    background: var(--hc-paper);
    color: var(--hc-habit);
    font-size: 1.0625rem;
    font-variant-numeric: oldstyle-nums;
    text-decoration: none;
}

.page-flags a:hover {
    color: var(--hc-rubric);
}

.page-flags a[aria-current] {
    border-left-color: var(--hc-rubric);
    color: var(--hc-rubric);
    font-weight: 500;
}

/* Ribbon bookmarks, one for each of the saints most often quoted. */
.ribbon-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ribbon-mark {
    --ribbon: var(--hc-rubric);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--hc-touch);
    padding: 0.25rem 1.75rem 0.25rem 0.75rem;
    background: var(--ribbon);
    color: var(--hc-paper);
    font-size: 1.0625rem;
    line-height: 1.25rem;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 50%, 100% 100%, 0 100%);
}

.ribbon-mark:hover {
    color: var(--hc-paper);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* A clip path would cut off an ordinary focus ring. */
.ribbon-mark:focus-visible {
    outline: 2px solid var(--hc-paper);
    outline-offset: -4px;
}

.ribbon-mark[aria-current] {
    box-shadow: inset 0.5rem 0 0 var(--hc-gilt);
    padding-left: 1.125rem;
    font-weight: 500;
}

.ribbon-count {
    font-size: 0.9375rem;
    font-variant-numeric: oldstyle-nums;
    white-space: nowrap;
}

.ribbon-1 { --ribbon: var(--hc-marian); }
.ribbon-2 { --ribbon: #7A4B62; }
.ribbon-3 { --ribbon: var(--hc-gilt-ink); }
.ribbon-4 { --ribbon: #4F6548; }
.ribbon-5 { --ribbon: var(--hc-habit); }
.ribbon-6 { --ribbon: #5B4F75; }

.more-authors {
    margin-top: 0.75rem;
}

.more-authors summary {
    display: flex;
    align-items: center;
    min-height: var(--hc-touch);
    color: var(--hc-marian);
    cursor: pointer;
}

.more-authors summary::before {
    content: "›";
    margin-right: 0.5rem;
}

.more-authors[open] summary::before {
    content: "⌄";
}

.more-authors ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    font-size: 1.0625rem;
    list-style: none;
}

.more-authors li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--hc-touch);
    border-bottom: 1px solid var(--hc-deckle);
}

.more-authors a[aria-current] {
    color: var(--hc-rubric);
    font-weight: 500;
}

/* What's showing, and how to stop showing it. */
.reading-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
    min-height: var(--hc-touch);
}

.reading-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin: 0;
    padding: 0;
    font-style: italic;
    list-style: none;
}

.reading-filters a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--hc-touch);
    color: var(--hc-habit);
}

.reading-filters a:hover {
    color: var(--hc-rubric);
}

/* Admin: the same book, opened at the back where the keeper's notes are. Bookmark tabs run along the top
   edge of the page, the numbers sit on index cards, and posts are kept in a ledger. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.admin-bar {
    display: flex;
    flex-direction: column;
}

.admin-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--hc-deckle);
}

.admin-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--hc-touch);
    margin-bottom: -1px;
    padding: 0 1rem;
    border: 1px solid var(--hc-deckle);
    border-radius: 5px 5px 0 0;
    background: var(--hc-aged);
    color: var(--hc-habit);
    font-size: 1.0625rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
}

.admin-tab:hover {
    color: var(--hc-rubric);
}

/* The open tab is part of the page. */
.admin-tab.active {
    border-bottom-color: var(--hc-paper);
    background: var(--hc-paper);
    color: var(--hc-rubric);
    font-weight: 500;
}

/* A wax seal with the number of letters waiting. */
.tab-count {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 0.75rem;
    background: var(--hc-rubric);
    color: var(--hc-paper);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    font-variant-caps: normal;
    letter-spacing: 0;
    text-align: center;
}

.admin-signout {
    display: flex;
    align-self: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: -0.75rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--hc-walnut);
}

/* An action that reads as a word rather than a button. */
.text-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--hc-touch);
    padding: 0;
    border: 0;
    background: none;
    color: var(--hc-marian);
    font: inherit;
    font-style: normal;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.text-button:hover {
    color: var(--hc-rubric);
}

.text-button-danger {
    color: var(--hc-rubric);
}

.text-button-danger:hover {
    color: var(--hc-habit);
}

/* On a phone, five tabs don't fit across the page, so they become a line of words. */
@media (max-width: 40rem) {
    .admin-tabs {
        flex-wrap: wrap;
        gap: 0 1.25rem;
    }

    .admin-tab {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .admin-tab.active {
        background: none;
        box-shadow: inset 0 -2px var(--hc-rubric);
    }
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 0.5rem;
}

.admin-head .field-help {
    max-width: 34rem;
    margin-top: 0.25rem;
}

.back-link {
    margin-bottom: -1rem;
    font-size: 1.0625rem;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--hc-touch);
}

/* Index cards on the overview, each with one number and where it leads. */
.desk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.desk-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
    height: 100%;
    min-height: 7.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hc-deckle);
    border-top: 3px solid var(--hc-gilt);
    border-radius: 2px 2px 5px 5px;
    background: var(--hc-mantle);
    color: var(--hc-habit);
    text-decoration: none;
}

.desk-card:hover {
    background: var(--hc-aged);
    color: var(--hc-habit);
}

.desk-card:hover .desk-label {
    color: var(--hc-rubric);
}

/* Something to do: the card's rule and number turn rose. */
.desk-card.is-due {
    border-top-color: var(--hc-rubric);
}

.desk-card.is-due .desk-number {
    color: var(--hc-rubric);
}

.desk-number {
    font-size: 2.75rem;
    line-height: 3rem;
    font-variant-numeric: oldstyle-nums;
}

.desk-label {
    font-size: 1.0625rem;
    line-height: 1.375rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--hc-walnut);
}

.desk-note {
    margin-top: -0.5rem;
    text-align: center;
}

.admin-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1rem;
}

.section-head a {
    font-size: 1.0625rem;
}

.ruled-short {
    min-height: 8rem;
    padding-top: 1rem;
    text-align: center;
}

/* The ledger: a post on each line, dated in the margin. */
.ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ledger-row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0 1rem;
    padding: 0.875rem 0.5rem;
    border-top: 1px solid var(--hc-deckle);
}

.ledger-row:last-child {
    border-bottom: 1px solid var(--hc-deckle);
}

.ledger-row.is-selectable {
    grid-template-columns: auto 4.25rem minmax(0, 1fr);
}

/* A ticked post is marked with a stroke of highlighter. */
.ledger-row:has(.row-check:checked) {
    background: linear-gradient(to right, rgba(247, 228, 138, 0.45), rgba(247, 228, 138, 0.1) 70%, transparent);
}

.row-check {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.25rem 0 0;
    accent-color: var(--hc-rubric);
    cursor: pointer;
}

.ledger-date {
    display: flex;
    flex-direction: column;
    padding-top: 0.125rem;
    font-size: 1.0625rem;
    line-height: 1.375rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--hc-rubric);
}

.ledger-year {
    font-variant-numeric: oldstyle-nums;
    color: var(--hc-walnut);
}

.ledger-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ledger-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.ledger-title a {
    color: var(--hc-ink);
    text-decoration: none;
}

.ledger-title a:hover {
    color: var(--hc-rubric);
    text-decoration: underline;
}

.ledger-title .is-quote {
    font-style: italic;
}

.ledger-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.0625rem;
    line-height: 1.5rem;
    color: var(--hc-walnut);
}

.ledger-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
}

.ledger-author {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--hc-walnut);
}

/* Something missing, pencilled in the margin. */
.mark {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border: 1px dashed var(--hc-rubric);
    border-radius: 2px;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--hc-rubric);
    white-space: nowrap;
}

.mark-scheduled {
    margin-left: 0.5rem;
    border-style: solid;
    border-color: var(--hc-marian);
    color: var(--hc-marian);
    vertical-align: 0.1em;
}

.swipes.is-small .swipe {
    padding-inline: 0.5rem;
    font-size: 1rem;
}

.swipes.is-small .swipe::before {
    inset-block: 0.625rem;
}

@media (max-width: 30rem) {
    .ledger-row,
    .ledger-row.is-selectable {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem 0.75rem;
    }

    .ledger-row.is-selectable {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ledger-row.is-selectable .row-check {
        grid-row: 1 / span 2;
    }

    .ledger-row.is-selectable .ledger-date,
    .ledger-row.is-selectable .ledger-main {
        grid-column: 2;
    }

    .ledger-date {
        flex-direction: row;
        gap: 0.375rem;
        padding-top: 0;
    }
}

/* Finding posts: tabs for all or the ones that need a look, then one line of search. */
.tab-number {
    margin-left: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 400;
    font-variant-caps: normal;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0;
    color: var(--hc-walnut);
}

.finder {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem 1rem;
}

.finder-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 44rem) {
    .finder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .finder-words,
    .finder-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 30rem) {
    .finder {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tabs standing on the page itself rather than on a panel. */
.book-tabs-alone {
    border-bottom: 1px solid var(--hc-deckle);
}

.book-tabs-alone .book-tab[aria-current] {
    border-bottom-color: var(--hc-paper);
    background: var(--hc-paper);
}

/* Tagging many posts at once. The bar only shows once a post is ticked, and counts them. */
.bulk-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    counter-reset: picked;
}

.row-check:checked {
    counter-increment: picked;
}

.bulk-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
    display: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hc-deckle);
    border-top: 3px solid var(--hc-gilt);
    border-radius: 2px;
    background: var(--hc-mantle);
}

.bulk-form:has(.row-check:checked) .bulk-bar {
    display: flex;
}

.bulk-form:has(.row-check:checked) .bulk-hint {
    display: none;
}

.bulk-count {
    align-self: center;
    min-width: 4.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--hc-rubric);
}

.bulk-count::before {
    content: counter(picked) " ";
    font-variant-numeric: oldstyle-nums;
}

.bulk-bar .field {
    flex: 1 1 12rem;
}

.bulk-bar .button-row {
    margin-top: 0;
}

/* On a phone the bar has to leave room for the posts: the count and the tag share a line. */
@media (max-width: 30rem) {
    .bulk-bar {
        gap: 0.25rem 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .bulk-count {
        min-width: 0;
    }

    .bulk-bar .field {
        flex-basis: 9rem;
    }

    .bulk-bar .field label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* A card in the margin, for the details around the main thing on the page. */
.margin-card {
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--hc-deckle);
    border-radius: 5px;
    background: var(--hc-mantle);
}

/* Writing a post: a title line, then a ruled page that grows as it's filled. */
.journal-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.field-title input {
    height: auto;
    padding-block: 0.25rem;
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    line-height: 2.5rem;
}

.field .ruled-paper {
    min-height: calc(10 * var(--hc-line) + 1rem);
    padding: 0.5rem 0.75rem;
    border-color: var(--hc-deckle);
    background-color: var(--hc-paper);
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--hc-rule) calc(100% - 1px));
    background-size: 100% var(--hc-line);
    background-position: 0 0.5rem;
    background-attachment: local;
    line-height: var(--hc-line);
    field-sizing: content;
}

.details-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem 1.5rem;
}

.field-span {
    grid-column: 1 / -1;
}

.save-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--hc-deckle);
    border-top: 3px solid var(--hc-gilt);
    border-radius: 2px;
    background: var(--hc-mantle);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.search-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.search-row .field {
    flex: 1;
}

.button-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

a.button {
    color: var(--hc-paper);
}

a.button:hover {
    color: var(--hc-paper);
}

a.button.button-secondary {
    color: var(--hc-habit);
}

.button-danger {
    border-color: var(--hc-rubric);
    background: var(--hc-rubric);
}

.button-danger:hover {
    background: var(--hc-habit);
}

.field select {
    height: var(--hc-touch);
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--hc-habit);
    background: transparent;
    color: var(--hc-ink);
    font: inherit;
}

.tag-picker {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

/* Floated so it sits inside the card instead of breaking its border. */
.tag-picker legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--hc-walnut);
}

/* A tag that can be turned on: faint until it's chosen, then fully inked. */
.swipe-check {
    cursor: pointer;
}

.swipe-check input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--hc-habit);
}

.swipe-check::before {
    opacity: 0.3;
}

.swipe-check:has(input:checked)::before {
    opacity: 1;
}

.danger-zone {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hc-deckle);
}

.notice {
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--hc-gilt);
    background: var(--hc-mantle);
    border-radius: 2px;
}

/* Letters from the contact form. */
.letters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.letter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--hc-deckle);
    border-left: 3px solid var(--hc-gilt);
    border-radius: 2px 5px 5px 2px;
}

.letter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1rem;
}

.letter-from {
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.message-body {
    margin-top: 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Written on the lines of the page. */
.letter .message-body {
    padding-bottom: 1px;
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--hc-rule) calc(100% - 1px));
    background-size: 100% var(--hc-line);
}

/* Tags, one to a line. */
.tag-ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-ledger li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--hc-deckle);
}

.tag-ledger li:last-child {
    border-bottom: 1px solid var(--hc-deckle);
}

.tag-ledger-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-ledger-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
}

.tag-ledger-tools.is-confirming span {
    font-style: italic;
}

.inline-input {
    width: 11rem;
    height: var(--hc-touch);
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--hc-deckle);
    background: transparent;
    color: var(--hc-ink);
    font: inherit;
    font-size: 1.0625rem;
}

.inline-input:hover,
.inline-input:focus {
    border-bottom-color: var(--hc-habit);
}

/* Numbered steps, in rose roman numerals as in a missal. */
.steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 3rem;
    counter-increment: step;
}

.steps > li::before {
    content: counter(step, upper-roman) ".";
    position: absolute;
    top: -0.25rem;
    left: 0;
    font-size: 1.75rem;
    line-height: 2.5rem;
    color: var(--hc-rubric);
}

.step-title {
    font-size: 1.375rem;
    color: var(--hc-habit);
}

/* Steps with a deckle rule between them, for a reader's page. */
.steps-ruled {
    gap: 0;
    margin-top: 1rem;
}

.steps-ruled > li {
    padding-block: 1.5rem;
    border-top: 1px solid var(--hc-deckle);
}

.steps-ruled > li:last-child {
    border-bottom: 1px solid var(--hc-deckle);
}

.steps-ruled > li::before {
    top: 1.25rem;
}

/* The opening line of a reader's page, under its heading. */
.lede {
    font-size: 1.375rem;
    font-style: italic;
    color: var(--hc-habit);
}

.step-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.field input[type="file"] {
    height: auto;
    padding: 0.25rem 0;
    border-bottom: 0;
    font-size: 1.0625rem;
}

input[type="file"]::file-selector-button {
    min-height: var(--hc-touch);
    margin-right: 0.75rem;
    padding: 0 1rem;
    border: 1px solid var(--hc-habit);
    border-radius: 2px;
    background: var(--hc-paper);
    color: var(--hc-habit);
    font: inherit;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.signin-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: 2rem;
}

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: var(--hc-touch);
}

/* Blazor validation and error states */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--hc-marian);
}

.invalid {
    outline: 1px solid var(--hc-rubric);
}

.validation-message {
    color: var(--hc-rubric);
}

.blazor-error-boundary {
    padding: 1rem;
    background: var(--hc-rubric);
    color: var(--hc-paper);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* The Readers page: plain ledger tables and a bar for each day. */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: oldstyle-nums tabular-nums;
}

.stats-table th,
.stats-table td {
    padding: 0.5rem;
    border-top: 1px solid var(--hc-deckle);
    text-align: left;
    font-weight: normal;
}

.stats-table thead th {
    border-top: 0;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--hc-walnut);
}

.stats-table td {
    text-align: right;
    white-space: nowrap;
}

.stats-table tbody th {
    overflow-wrap: anywhere;
}

.stats-bars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-bars li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.125rem 0;
}

.stats-bar-label {
    font-size: 0.95rem;
    color: var(--hc-walnut);
}

.stats-bar {
    display: block;
    width: var(--share);
    min-width: 1px;
    height: 0.75rem;
    border-radius: 1px;
    background: var(--hc-gilt);
}

.stats-bar-count {
    text-align: right;
    font-variant-numeric: oldstyle-nums tabular-nums;
}