/* /Components/Admin/FeedbackPanel.razor.rz.scp.css */
/* The admin's feedback ledger: gold stars on the line, each note under a small label. */
.feedback-row-stars[b-8kuhltbul3] { color: var(--gold); letter-spacing: .05em; }
.feedback-row-label[b-8kuhltbul3] {
    margin: 8px 0 0;
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.feedback-row-note[b-8kuhltbul3] { margin: 2px 0 0; white-space: pre-wrap; }
/* /Components/Admin/VoicePanel.razor.rz.scp.css */
.host-lines[b-ublkeihijg] { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.host-line[b-ublkeihijg] { border-top: 1px solid var(--sheet-edge); padding-top: 8px; }
.host-line-text[b-ublkeihijg] { margin: 0 0 2px; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.host-line-meta[b-ublkeihijg] { margin: 0; color: var(--text-secondary); }
.host-line-meta .link-button[b-ublkeihijg] { margin-left: 8px; }
/* /Components/ArrivalPiece.razor.rz.scp.css */
/* The way in: frosted glass over the full-screen journal, one quote held up on an index card in
   the middle. Leaving, the card goes first, then the frost fades to the journal. */
.arrival[b-xszw9x961g] {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    overflow-y: auto;
    padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 38%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    color: var(--ink);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .7s ease .35s;
}
.arrival.is-leaving[b-xszw9x961g] { opacity: 0; pointer-events: none; }

.arrival-figure[b-xszw9x961g] {
    margin: 0;
    width: min(100%, 36rem);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrival-from[b-xszw9x961g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 1.2em;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 13px;
    color: var(--text-secondary);
}
.arrival-heart[b-xszw9x961g] { font-size: 17px; line-height: 0; }

/* The index card: the head on a red rule, the piece on blue rules a line apart, with a little
   paper in hand either side. qs-haiku.js snapCard sets where the rules fall. */
.arrival-card[b-xszw9x961g] {
    --card-face: #fffdf8;
    --card-head-rule: rgba(205, 92, 92, 0.6);
    --card-rule: rgba(112, 156, 204, 0.4);
    position: relative;
    padding: 14px clamp(18px, 4vw, 30px) calc(var(--card-pitch, 2.4rem) + 6px);
    border-radius: 2px;
    background-color: var(--card-face);
    /* Each rule ramps in and out over half a pixel, so the card's tilt doesn't step it. */
    background-image:
        linear-gradient(to bottom, transparent calc(var(--card-head-at, 3rem) - 1.3px),
            var(--card-head-rule) calc(var(--card-head-at, 3rem) - 0.9px),
            var(--card-head-rule) calc(var(--card-head-at, 3rem) - 0.1px),
            transparent calc(var(--card-head-at, 3rem) + 0.3px)),
        linear-gradient(var(--card-face), var(--card-face)),
        linear-gradient(to bottom, transparent calc(var(--card-pitch, 2.4rem) - 1.3px),
            var(--card-rule) calc(var(--card-pitch, 2.4rem) - 0.9px),
            var(--card-rule) calc(var(--card-pitch, 2.4rem) - 0.1px),
            transparent calc(var(--card-pitch, 2.4rem) + 0.3px));
    background-size:
        100% 100%,
        100% calc(var(--card-head-at, 3rem) + 3px),
        100% var(--card-pitch, 2.4rem);
    background-position:
        0 0,
        0 0,
        0 calc(var(--card-rule-at, 5rem) - var(--card-pitch, 2.4rem));
    background-repeat: no-repeat, no-repeat, repeat-y;
    box-shadow:
        0 1px 2px rgba(60, 48, 30, 0.12),
        0 18px 44px -14px rgba(60, 48, 30, 0.4);
    opacity: 0;
    /* Only a slide, no scale: the ink is placed as the card arrives, and a scale would skew it. */
    transform: translateY(10px);
    transition: opacity .6s ease, transform .8s ease;
}
.arrival.is-shown .arrival-card[b-xszw9x961g] { opacity: 1; transform: none; }
.arrival.is-leaving .arrival-card[b-xszw9x961g] {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .4s ease;
}

.arrival-ink.has-ink .arrival-ink-title[b-xszw9x961g],
.arrival-ink.has-ink .arrival-ink-author[b-xszw9x961g],
.arrival-ink.has-ink .arrival-ink-line[b-xszw9x961g] { color: transparent; }

.arrival-ink-title[b-xszw9x961g],
.arrival-ink-author[b-xszw9x961g],
.arrival-ink-line[b-xszw9x961g] {
    color: var(--journal-ink, var(--ink));
    font-family: var(--hand, "Playwrite NZ"), cursive;
    margin: 0;
}
.arrival-ink-title[b-xszw9x961g] {
    text-align: center;
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    line-height: 1.5;
    /* An empty ruled line between the head and the piece. */
    margin-bottom: var(--card-pitch, 2.4rem);
}
/* The lines and the author share one size and line, so every row stands on a blue rule. */
.arrival-ink-line[b-xszw9x961g],
.arrival-ink-author[b-xszw9x961g] {
    font-size: clamp(1.1rem, 3.2vw, 1.55rem);
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.arrival-ink-author[b-xszw9x961g] { text-align: center; opacity: .75; }
.arrival-more[b-xszw9x961g] { opacity: .55; }

.arrival-foot[b-xszw9x961g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(100%, 42rem);
}

.arrival-hint[b-xszw9x961g] {
    margin: 0;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity .7s ease 1.2s;
}
.arrival.is-shown .arrival-hint[b-xszw9x961g] { opacity: .85; }

.arrival-controls[b-xszw9x961g] {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .45s ease .35s;
}
.arrival.is-shown .arrival-controls[b-xszw9x961g] { opacity: 1; }

.arrival-timer[b-xszw9x961g] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.arrival-timer-ring[b-xszw9x961g] {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}

.arrival-timer-track[b-xszw9x961g] {
    stroke: color-mix(in srgb, var(--rule-line) 70%, transparent);
}

.arrival-timer-progress[b-xszw9x961g] {
    stroke: var(--wax);
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    stroke-linecap: round;
}

/* The ring runs once the card is written, with the hold; until then only its track shows. */
.arrival:not(.is-counting) .arrival-timer-progress[b-xszw9x961g] { opacity: 0; }
.arrival.is-counting .arrival-timer-progress[b-xszw9x961g] {
    animation: arrival-timer-countdown-b-xszw9x961g var(--arrival-hold-ms, 5000ms) linear forwards;
}

@keyframes arrival-timer-countdown-b-xszw9x961g {
    to { stroke-dashoffset: 100; }
}

.arrival-skip[b-xszw9x961g] {
    margin: 0;
    padding: 6px 14px;
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--sheet) 88%, transparent);
    border: 1px solid var(--sheet-edge);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.arrival-skip:hover[b-xszw9x961g] {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--wax) 35%, var(--sheet-edge));
}

.arrival-skip:focus[b-xszw9x961g] {
    outline: none;
}

.arrival-skip:focus-visible[b-xszw9x961g] {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .arrival[b-xszw9x961g],
    .arrival-ink[b-xszw9x961g],
    .arrival-hint[b-xszw9x961g],
    .arrival-controls[b-xszw9x961g] { transition: none; }
    .arrival-card[b-xszw9x961g] { transform: none; }
    .arrival-timer-progress[b-xszw9x961g] { animation: none; stroke-dashoffset: 50; }
}

/* The typed words round the card sit on a slip of paper, so they read over a dark journal, and
   they leave with the card rather than fading with the frost. */
.arrival-from > span:first-child:not(:empty)[b-xszw9x961g],
.arrival-hint[b-xszw9x961g] {
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    color: var(--ink-soft);
}
.arrival-from > span:first-child:empty[b-xszw9x961g] { display: none; }

.arrival.is-leaving .arrival-from[b-xszw9x961g],
.arrival.is-leaving .arrival-foot[b-xszw9x961g] {
    opacity: 0;
    transition: opacity .3s ease;
}
/* /Components/CardPack.razor.rz.scp.css */
/* An index card in hand, landscape, on top of the rest of its pack. Size, stock, corners and
   marking colours come from CardCatalog's CSS vars; the page, the frame, the corners and the
   written rows are page.css. */

/* a horizontal swipe cycles the pack; a vertical one still scrolls the desk */
[b-yudpgsjoh2] .journal-stage {
    touch-action: pan-y;
    max-width: 760px;
    max-height: min(72dvh, 820px);
    aspect-ratio: var(--card-ratio);
}

/* sized by the writer's hand (the grip or the wheel): no cap on how tall it grows */
.card-pack-root.is-framed[b-yudpgsjoh2]  .journal-stage { max-height: none; }

.book.card-book[b-yudpgsjoh2] {
    width: var(--card-w);
    height: var(--card-h);
    perspective: 1400px;
}

/* the cards beneath: a few, each a little askew, their edges showing past the one in hand */
.card-under[b-yudpgsjoh2] {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    background: var(--card-stock);
    box-shadow:
        0 0 0 0.25mm rgba(60, 48, 30, 0.12),
        0.4mm 0.8mm 2mm rgba(40, 30, 10, 0.18);
}
.card-under-1[b-yudpgsjoh2] { transform: translate(1.1%, 1.4%) rotate(1.3deg); filter: brightness(.985); }
.card-under-2[b-yudpgsjoh2] { transform: translate(-1.3%, 2.3%) rotate(-1.9deg); filter: brightness(.97); }
.card-under-3[b-yudpgsjoh2] { transform: translate(.7%, 3.3%) rotate(.7deg); filter: brightness(.955); }

/* the pack's edges stand past the card's box; zoomed in full screen, the stage clips again */
[b-yudpgsjoh2] .journal-stage:not(.is-zoomed) { overflow: visible; }

.card-leaf[b-yudpgsjoh2] {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--card-radius);
    background: var(--card-stock);
    box-shadow:
        0 0 0 0.25mm rgba(60, 48, 30, 0.10),
        0 0.6mm 1.6mm rgba(40, 30, 10, 0.14);
    transform-origin: center;
    will-change: transform;
}

/* Held flat for the ink host's measure only (data-ink-tilt): !important outranks the turn's
   own animation, for the instant of the measure, and never paints. */
.card-leaf.is-square[b-yudpgsjoh2] { transform: none !important; }

/* turning over: a quarter turn edge-on, then the other side comes round */
.card-leaf.turning-out[b-yudpgsjoh2] {
    transition: transform 170ms ease-in;
    transform: rotateX(90deg);
}
.card-leaf.turning-in[b-yudpgsjoh2] {
    animation: card-turn-in-b-yudpgsjoh2 170ms ease-out both;
}
@keyframes card-turn-in-b-yudpgsjoh2 {
    from { transform: rotateX(-90deg); }
    to { transform: rotateX(0); }
}

/* cycling: the card put to the back slides off and under; the one brought back lies down */
.card-leaving[b-yudpgsjoh2] {
    z-index: 3;
    pointer-events: none;
}
/* forward, the card in hand goes off to the right and under the pack; back, the card from
   the bottom comes in from the left and lies down on top */
.card-leaving.to-back[b-yudpgsjoh2] { animation: card-to-back-b-yudpgsjoh2 380ms cubic-bezier(.4, .1, .3, 1) both; }
.card-leaf.arriving[b-yudpgsjoh2] { z-index: 3; animation: card-arrive-b-yudpgsjoh2 380ms cubic-bezier(.4, .1, .3, 1) both; }
@keyframes card-to-back-b-yudpgsjoh2 {
    0% { transform: none; opacity: 1; }
    55% { transform: translate(62%, -6%) rotate(5deg); opacity: 1; }
    100% { transform: translate(8%, 3%) rotate(1deg) scale(.97); opacity: 0; }
}
@keyframes card-arrive-b-yudpgsjoh2 {
    0% { transform: translate(-8%, 3%) rotate(-1deg) scale(.97); opacity: 0; }
    45% { transform: translate(-62%, -6%) rotate(-5deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .card-leaf.turning-out[b-yudpgsjoh2], .card-leaf.turning-in[b-yudpgsjoh2], .card-leaf.arriving[b-yudpgsjoh2], .card-leaving[b-yudpgsjoh2] { transition: none; animation: none; }
    .card-leaving[b-yudpgsjoh2] { display: none; }
}

/* the flip mark, in the card's bottom-right corner over the paper */
.card-flip[b-yudpgsjoh2] {
    position: absolute;
    right: 2mm;
    bottom: 2mm;
    z-index: 6;
    width: 7mm;
    height: 7mm;
    padding: 1.2mm;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-stock) 70%, transparent);
    color: color-mix(in srgb, var(--journal-ink, #2b2a24) 70%, transparent);
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s ease, background .15s ease;
}
.card-flip:hover:not(:disabled)[b-yudpgsjoh2],
.card-flip:focus-visible[b-yudpgsjoh2] {
    opacity: 1;
    background: color-mix(in srgb, var(--journal-ink, #2b2a24) 8%, var(--card-stock));
}
.card-flip:focus-visible[b-yudpgsjoh2] { outline: 2px solid var(--laurel, #5a7a5a); outline-offset: 1px; }
.card-flip:disabled[b-yudpgsjoh2] { cursor: default; opacity: .35; }
.card-flip svg[b-yudpgsjoh2] {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* /Components/Cards/CardPackMini.razor.rz.scp.css */
/* The pack is a box of the top card's size; the loose card lies to its right, a little lower. */
.card-mini[b-eh6qlq4sv0] {
    position: relative;
    display: inline-block;
    width: var(--mini-w);
    height: calc(var(--mini-h) + 5px);
    flex: 0 0 auto;
}
.card-mini.has-loose[b-eh6qlq4sv0] {
    width: calc(var(--mini-w) * 1.62);
    height: calc(var(--mini-h) * 1.28);
}

.card-mini-pack[b-eh6qlq4sv0] {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: var(--mini-w);
    height: var(--mini-h);
}

/* the cards under the top one: their edges step down, the pack's thickness */
.card-mini-edges[b-eh6qlq4sv0] {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--card-radius) * var(--mini-scale) * 3.78);
    background: var(--card-stock);
    box-shadow:
        0 1.5px 0 -0.2px color-mix(in srgb, var(--card-stock) 88%, #6b5a3a),
        0 3px 0 -0.2px var(--card-stock),
        0 4.5px 0 -0.2px color-mix(in srgb, var(--card-stock) 86%, #6b5a3a),
        0 6px 0 -0.2px var(--card-stock),
        2px 8px 10px rgba(40, 30, 10, 0.24);
}

/* the top card at true size, scaled into the box */
.card-mini-scale[b-eh6qlq4sv0] {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--card-w);
    height: var(--card-h);
    transform: scale(var(--mini-scale));
    transform-origin: 0 0;
}
.card-mini-card.page[b-eh6qlq4sv0] {
    position: absolute;
    inset: 0;
    display: block;
    padding: var(--page-margin-top) var(--page-margin-x) 0;
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 0.25mm rgba(60, 48, 30, 0.12);
    overflow: hidden;
    /* the ruling under the first row, as the card in hand draws it */
    background-position: 0 0, 0 calc(var(--page-margin-top) + var(--row-baseline-at) - var(--paper-pitch));
}
.card-mini-card.page.paper-dots[b-eh6qlq4sv0] {
    background-position: 0 0, calc(var(--page-margin-x) - var(--paper-pitch) / 2) calc(var(--page-margin-top) + var(--row-baseline-at) - var(--paper-pitch) / 2);
}
.card-mini-title[b-eh6qlq4sv0] {
    position: absolute;
    left: var(--page-margin-x);
    right: 30%;
    top: calc(var(--page-margin-top) + var(--row-baseline-at) - 5.2mm);
    font-family: var(--serif);
    font-size: 4.2mm;
    font-weight: 600;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--ink, #2b2a24) 82%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the elastic band, round the pack across its short side: a flat strip over the top card
   that runs on over the edges, with its own shadow */
.card-mini-band[b-eh6qlq4sv0] {
    position: absolute;
    top: -3px;
    bottom: -8px;
    left: 68%;
    width: max(5px, calc(var(--mini-w) * 0.045));
    border-radius: 2px;
    background: linear-gradient(90deg, #6f5136, #9a7350 40%, #86633f 70%, #5f442c);
    box-shadow:
        1px 1px 2px rgba(30, 20, 10, 0.35),
        inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

/* a loose blank card, put down beside the pack */
.card-mini-loose[b-eh6qlq4sv0] {
    position: absolute;
    z-index: 1;
    left: calc(var(--mini-w) * 0.6);
    top: calc(var(--mini-h) * 0.24);
    width: var(--mini-w);
    height: var(--mini-h);
    transform: rotate(4deg);
    filter: drop-shadow(1px 3px 4px rgba(40, 30, 10, 0.2));
}

/* Drawn small, a 1px rule would vanish: the markings and the title rule keep a visible
   weight whatever the scale. */
.card-mini-card.page[b-eh6qlq4sv0] {
    --mini-line: calc(0.9px / var(--mini-scale));
    /* the paper classes set their own defaults on the element; the card's own win here */
    --ruling: var(--card-rule);
    --paper-pitch: var(--card-pitch);
}
.card-mini-card.page.paper-lines[b-eh6qlq4sv0],
.card-mini-card.page.paper-guide[b-eh6qlq4sv0] {
    background-image:
        none,
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--paper-pitch) - var(--mini-line)),
            var(--ruling) calc(var(--paper-pitch) - var(--mini-line)),
            var(--ruling) var(--paper-pitch)
        );
    background-size: auto, 100% var(--paper-pitch);
}
.card-mini-card.page.paper-dots[b-eh6qlq4sv0] {
    background-image:
        none,
        radial-gradient(circle, var(--ruling) var(--mini-line), transparent calc(var(--mini-line) * 1.15));
    background-size: auto, var(--paper-pitch) var(--paper-pitch);
}

.card-mini-card.page .card-head-rule[b-eh6qlq4sv0] {
    height: calc(var(--mini-line) * 1.4);
    top: calc(var(--page-margin-top) + var(--row-baseline-at) - var(--mini-line));
}

/* the pack's first written card on top, as the card in hand draws it, scaled with the rest */
.card-mini-book[b-eh6qlq4sv0] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;     /* not the journal's own size, which .book takes */
    height: 100%;
    transition: none;
    pointer-events: none;
    border-radius: var(--card-radius);
    background: var(--card-stock);
    box-shadow: 0 0 0 0.25mm rgba(60, 48, 30, 0.12);
    overflow: hidden;
}
/* /Components/Cards/CardPackSetup.razor.rz.scp.css */
/* The card at its true size in millimetres, scaled into a box of the preview's size. */
.card-setup-preview[b-nn97agmfvb] {
    position: relative;
    width: min(100%, var(--preview-w));
    height: var(--preview-h);
    margin: 14px 0 6px;
}
.card-setup-book[b-nn97agmfvb] {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--card-w);
    height: var(--card-h);
    transform-origin: 0 0;
}
.card-setup-leaf[b-nn97agmfvb] {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    background: var(--card-stock);
    box-shadow:
        0 0 0 0.25mm rgba(60, 48, 30, 0.12),
        0.6mm 1.4mm 3mm rgba(40, 30, 10, 0.18);
}
.card-setup-spec[b-nn97agmfvb] { margin: 0 0 6px; }

.card-setup-stock[b-nn97agmfvb], .card-setup-colour[b-nn97agmfvb] { display: inline-flex; align-items: center; gap: 7px; }
.card-setup-swatch[b-nn97agmfvb] {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(60, 48, 30, .25);
}
.card-setup-colour-chip[b-nn97agmfvb] {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    background:
        linear-gradient(to bottom, transparent 0 3px, var(--head) 3px 4.5px, transparent 4.5px 7.5px, var(--rule) 7.5px 8.5px, transparent 8.5px),
        #fffdf8;
    box-shadow: inset 0 0 0 1px rgba(60, 48, 30, .2);
}

@media (max-width: 520px) {
    .card-setup-preview[b-nn97agmfvb] { width: 100%; }
}
/* /Components/Cards/CardReorder.razor.rz.scp.css */
/* The cards laid down the pad, each over the one above but for its title strip. */
.card-reorder[b-3halhcuha1] {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 28px auto 36px;
    padding: 0 16px;
}

.card-reorder-lead[b-3halhcuha1] {
    margin: 0 0 18px;
    font-family: var(--ui);
    font-size: 13px;
    color: color-mix(in srgb, var(--on-leather, #f4efe2) 85%, transparent);
    text-align: center;
}

.card-reorder-stack[b-3halhcuha1] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* a card seen down to its title rule: the stock, the head rule under the title, and the
   card above lying over its top edge */
.card-reorder-card[b-3halhcuha1] {
    position: relative;
    display: grid;
    grid-template-columns: 2.2em 1fr auto auto;
    align-items: end;
    gap: 0 12px;
    height: 58px;
    margin-top: -8px;
    padding: 0 12px 10px 14px;
    border-radius: var(--card-radius, 2px);
    background:
        linear-gradient(to bottom, transparent 0 46px, var(--card-head-rule, #c55) 46px 47.5px, transparent 47.5px),
        var(--card-stock, #fbf8f0);
    /* the shadow upward falls on the card beneath, so each reads as lying over it */
    box-shadow:
        0 -3px 6px rgba(30, 20, 10, 0.22),
        0 3px 8px rgba(30, 20, 10, 0.28);
    cursor: grab;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.card-reorder-card:first-child[b-3halhcuha1] { margin-top: 0; }
.card-reorder-card:hover[b-3halhcuha1] { transform: translateX(4px); }
.card-reorder-card.is-dragging[b-3halhcuha1] {
    cursor: grabbing;
    opacity: .55;
    transform: translateX(10px);
}

.card-reorder-no[b-3halhcuha1] {
    align-self: center;
    font-family: var(--ui);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.card-reorder-title[b-3halhcuha1] {
    min-width: 0;
    font-family: var(--hand-family);
    font-size: 19px;
    line-height: 1.2;
    color: var(--card-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-reorder-date[b-3halhcuha1],
.card-reorder-more[b-3halhcuha1] {
    font-family: var(--hand-family);
    font-size: 14px;
    color: color-mix(in srgb, var(--card-ink) 70%, transparent);
    white-space: nowrap;
}
.card-reorder-more[b-3halhcuha1] { font-family: var(--ui); font-size: 11px; color: var(--text-secondary); }

.card-reorder-moves[b-3halhcuha1] {
    display: none;
    position: absolute;
    right: 6px;
    top: 4px;
    gap: 2px;
}
.card-reorder-card:hover .card-reorder-moves[b-3halhcuha1],
.card-reorder-card:focus-within .card-reorder-moves[b-3halhcuha1] { display: inline-flex; }
@media (hover: none) {
    .card-reorder-moves[b-3halhcuha1] { display: inline-flex; }
}

.card-reorder-move[b-3halhcuha1] {
    width: 24px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--sheet-edge, rgba(60, 48, 30, .2));
    border-radius: 4px;
    background: var(--card-stock, #fbf8f0);
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}
.card-reorder-move:disabled[b-3halhcuha1] { opacity: .35; cursor: default; }
.card-reorder-move:focus-visible[b-3halhcuha1] { outline: 2px solid var(--laurel); outline-offset: 1px; }

.card-reorder-actions[b-3halhcuha1] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

/* on the leather, not the paper */
.card-reorder-actions .ghost-button[b-3halhcuha1] {
    color: var(--on-leather, #f4efe2);
    border-color: color-mix(in srgb, var(--on-leather, #f4efe2) 55%, transparent);
    background: transparent;
}

.card-reorder-error[b-3halhcuha1] {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--on-leather, #f4efe2);
}
/* /Components/CompareJournal.razor.rz.scp.css */
/* Comparison twin — same ISO A5 millimetre geometry as the poem journal. The page, the
   frame, the corners and the written rows are page.css; this is the photo twin's own
   furniture: a plain board, the spread, the photo face and the toolbar. */

/* a horizontal swipe turns the spread. The stage is TwinStage's: ::deep reaches it. */
[b-fs68r03ei0] .journal-stage {
    touch-action: pan-y;
    max-width: 940px;
    aspect-ratio: calc(var(--journal-book-w) / var(--journal-book-h));
    perspective: 2200px;
}
.cj-root.is-framed[b-fs68r03ei0]  .journal-stage {
    aspect-ratio: calc(var(--journal-book-w) / var(--journal-book-h));
}

/* Cover — EcoQua yellow board (same language as poem twin). */
.cover[b-fs68r03ei0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cover-shadow[b-fs68r03ei0] {
    position: absolute;
    width: var(--a5-w);
    height: var(--a5-h);
    border-radius: calc(4mm * var(--cover-round, 1));
    background: radial-gradient(ellipse 70% 55% at 40% 35%, #E0D2A8 0%, #D9CBA8 55%, #C9BB92 100%);
    transform: translate(2.5mm, 3mm);
    filter: blur(0.4px);
}

.cover-face[b-fs68r03ei0] {
    position: relative;
    width: var(--a5-w);
    height: var(--a5-h);
    border-radius: calc(4mm * var(--cover-round, 1));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cover-border, var(--eco-yellow-border)) 78%, var(--cover-shade, var(--eco-yellow-type)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* surface: .qs-cover-board (book.css) */
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, white 22%, transparent),
        inset 0 0 48px color-mix(in srgb, var(--cover-shade, var(--eco-yellow-type)) 14%, transparent);
}

.cover-center[b-fs68r03ei0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--cover-mark, var(--ink));
}

.cover-mark[b-fs68r03ei0] {
    width: 96px;
    height: 96px;
    color: var(--cover-mark, var(--ink));
    margin-bottom: 6px;
    opacity: 0.92;
}

.cover-word[b-fs68r03ei0] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    color: var(--cover-type, var(--eco-yellow-type));
    line-height: 1.05;
    opacity: 0.94;
}

.cover-rule[b-fs68r03ei0] {
    width: 120px;
    height: 1.5px;
    background: var(--cover-rule, #C79E0C);
    margin: 6px 0;
    opacity: 0.88;
}

.cover-sub[b-fs68r03ei0] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    color: var(--cover-type, var(--eco-yellow-type));
    opacity: 0.92;
}

.cover-footer[b-fs68r03ei0] {
    position: absolute;
    bottom: 26px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--cover-accent, #A8850B);
    opacity: 0.88;
}

.cover-open[b-fs68r03ei0] {
    position: absolute;
    bottom: 12px;
    right: 20px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--cover-accent, #B08E10);
}

.band[b-fs68r03ei0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--journal-band);
    border-radius: 2mm 2mm 0 0;
    z-index: 3;
}
.band-edge[b-fs68r03ei0] {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.band-edge-foot[b-fs68r03ei0] {
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.7mm;
    border-radius: 0 0 1.2mm 1.2mm;
}
.band-edge-fore[b-fs68r03ei0] {
    top: var(--journal-band);
    right: 0;
    bottom: 0;
    width: 0.7mm;
    border-radius: 0 0 1.2mm 0;
}

.spread[b-fs68r03ei0] { position: absolute; inset: 0; }

.leaf-host[b-fs68r03ei0] {
    position: absolute;
    top: var(--journal-leaf-top);
    width: var(--a5-w);
    height: var(--a5-h);
}

.leaf-host.left[b-fs68r03ei0] { left: 0; }
.leaf-host.right[b-fs68r03ei0] { left: calc(var(--a5-w) + var(--journal-gutter)); }

.leaf-host.right[b-fs68r03ei0]::before {
    content: "";
    position: absolute;
    top: 1mm;
    right: 0;
    bottom: 1.5mm;
    width: 1.5mm;
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0.5mm 0.5mm 0;
    background:
        linear-gradient(90deg, rgba(90, 70, 40, 0.08), transparent 50%),
        repeating-linear-gradient(180deg, #F8F3E8 0 0.3mm, #EDE4D0 0.3mm 0.55mm, #E2D9C3 0.55mm 0.8mm);
}

.leaf-host.right[b-fs68r03ei0]  .page {
    right: 1.2mm;
    z-index: 1;
    border-radius: 1mm 0.3mm 0.3mm 1mm;
}

.gutter[b-fs68r03ei0] {
    position: absolute;
    top: var(--journal-leaf-top);
    left: var(--a5-w);
    width: var(--journal-gutter);
    height: var(--a5-h);
    background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.02) 40%, rgba(0,0,0,.02) 60%, rgba(0,0,0,.10));
}

/* Photo face: cream only — the real page is in the photograph. */
.cj-photo[b-fs68r03ei0] {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 34px;
    background-image:
        repeating-linear-gradient(102deg, transparent 0 3px, rgba(140, 120, 80, 0.018) 3px 4px);
    background-size: auto;
}

[b-fs68r03ei0] .cj-page.is-selected {
    box-shadow: inset 0 0 0 2px var(--ink);
}

[b-fs68r03ei0] .cj-edit {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    border: 1px solid var(--sheet-edge);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sheet) 92%, transparent);
    font-family: var(--ui);
    font-size: 11px;
    padding: 3px 9px;
    cursor: pointer;
    color: var(--text-secondary);
}

[b-fs68r03ei0] .cj-edit:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* printed labels on the face: the twin's own, not writing */
[b-fs68r03ei0] .cj-label {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 4;
    margin: 0;
    font-family: var(--ui);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cj-photo .cj-label[b-fs68r03ei0] { position: static; margin: 0 0 6px; }

.cj-photo-img[b-fs68r03ei0] {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: contain;
    background: color-mix(in srgb, var(--paper) 80%, var(--sheet));
    border-radius: 2px;
}

.cj-photo-empty[b-fs68r03ei0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--text-secondary);
}

[b-fs68r03ei0] .cj-pagenum {
    position: absolute;
    z-index: 4;
    bottom: var(--journal-margin-bottom);
    left: var(--journal-margin-x);
    right: var(--journal-margin-x);
    height: var(--journal-pagenum-band);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--ui);
    font-size: 11px;
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaf[b-fs68r03ei0] {
    position: absolute;
    top: var(--journal-leaf-top);
    width: var(--a5-w);
    height: var(--a5-h);
    transform-style: preserve-3d;
    z-index: 5;
}

.leaf-right[b-fs68r03ei0] { left: calc(var(--a5-w) + var(--journal-gutter)); transform-origin: left center; }
.leaf-left[b-fs68r03ei0] { left: 0; transform-origin: right center; }
.leaf-face[b-fs68r03ei0] { position: absolute; inset: 0; backface-visibility: hidden; }
.leaf-back[b-fs68r03ei0] { transform: rotateY(180deg); }

.cj-toolbar[b-fs68r03ei0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 0 4px;
}

.cj-toolbar-left[b-fs68r03ei0],
.cj-toolbar-right[b-fs68r03ei0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cj-toolbar-right[b-fs68r03ei0] { gap: 6px; }

.cj-review[b-fs68r03ei0] {
    min-width: 7rem;
}

.cj-upload[b-fs68r03ei0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.cj-upload.is-busy[b-fs68r03ei0] {
    opacity: 0.6;
    pointer-events: none;
}

.cj-upload[b-fs68r03ei0]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
/* /Components/FeedbackSheet.razor.rz.scp.css */
/* The feedback sheet: the stars in a row with a word beside them, and four full-width notes. */
.feedback-sheet .qs-field[b-bkry1a4a3i] { max-width: none; }
.feedback-note[b-bkry1a4a3i] { resize: vertical; min-height: 64px; }
.feedback-stars[b-bkry1a4a3i] { align-items: center; gap: 2px; margin-bottom: 8px; }
.feedback-stars-word[b-bkry1a4a3i] { margin-left: 10px; }
.feedback-message[b-bkry1a4a3i] { margin: 14px 0 0; font-size: 14px; color: var(--text-primary); }
.feedback-message.is-error[b-bkry1a4a3i] { color: var(--wax); }

/* Each part of the note has a small line mark before its name: a star, a heart, a thumb
   down, a bulb, a speech bubble. */
.feedback-label[b-bkry1a4a3i] { display: flex; align-items: center; gap: 7px; }
.feedback-ico[b-bkry1a4a3i] {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-secondary);
}
/* /Components/FirstPageGuide.razor.rz.scp.css */
/* The first page's guide: a small paper note beside the control it names. Over the writing
   screen (35), under the finish sheet (40). Placed by qsOnboarding.guide; until then it
   waits, unseen, at the top left. */
.fp-guide[b-zv0jo52kcn] {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 38;
    width: min(360px, calc(100vw - 32px));
    padding: 16px 18px 14px;
    background: var(--sheet);
    color: var(--text-primary);
    border: 1px solid var(--sheet-edge);
    border-radius: var(--radius-sheet);
    box-shadow: 0 10px 30px rgba(31, 40, 51, 0.16), 0 2px 6px rgba(31, 40, 51, 0.08);
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.45;
    opacity: 0;
    transition: opacity 0.25s ease;
    outline: none;
}

.fp-guide.is-placed[b-zv0jo52kcn] { opacity: 1; }
.fp-guide.is-compact[b-zv0jo52kcn] { width: min(300px, calc(100vw - 32px)); padding: 12px 16px 10px; }

.fp-guide-kicker[b-zv0jo52kcn] {
    margin: 0 0 2px;
    font-family: var(--ui);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fp-guide-title[b-zv0jo52kcn] {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
}

.fp-guide-body p[b-zv0jo52kcn] { margin: 0 0 8px; }
.fp-guide-aside[b-zv0jo52kcn] { color: var(--text-secondary); font-size: 0.95rem; }

.fp-guide-ways[b-zv0jo52kcn] { margin: 0 0 8px; display: grid; gap: 4px; }
.fp-guide-ways > div[b-zv0jo52kcn] { display: grid; grid-template-columns: 5.6em 1fr; gap: 8px; }
.fp-guide-ways dt[b-zv0jo52kcn] { font-weight: 600; }
.fp-guide-ways dd[b-zv0jo52kcn] { margin: 0; }
.fp-guide kbd[b-zv0jo52kcn] {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 5px;
    border: 1px solid var(--rule-line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--paper);
    font-family: var(--ui);
    font-size: 0.8rem;
    text-align: center;
}

.fp-guide-actions[b-zv0jo52kcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.fp-guide-close[b-zv0jo52kcn] {
    margin-left: auto;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: var(--ui);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.fp-guide-close:hover[b-zv0jo52kcn] { color: var(--text-primary); }
.fp-guide-close:focus-visible[b-zv0jo52kcn], .fp-guide-go:focus-visible[b-zv0jo52kcn] { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The arrow: a small square turned on its point, on the side facing the target. */
.fp-guide-arrow[b-zv0jo52kcn] {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    transform: rotate(45deg);
    display: none;
}
.fp-guide[data-side="below"] .fp-guide-arrow[b-zv0jo52kcn] {
    display: block; top: -8px; left: calc(var(--fp-arrow-x, 50%) - 7px);
    border-right: 0; border-bottom: 0;
}
.fp-guide[data-side="above"] .fp-guide-arrow[b-zv0jo52kcn] {
    display: block; bottom: -8px; left: calc(var(--fp-arrow-x, 50%) - 7px);
    border-left: 0; border-top: 0;
}
.fp-guide[data-side="right"] .fp-guide-arrow[b-zv0jo52kcn] {
    display: block; left: -8px; top: calc(var(--fp-arrow-y, 50%) - 7px);
    border-right: 0; border-top: 0;
}
.fp-guide[data-side="left"] .fp-guide-arrow[b-zv0jo52kcn] {
    display: block; right: -8px; top: calc(var(--fp-arrow-y, 50%) - 7px);
    border-left: 0; border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fp-guide[b-zv0jo52kcn] { transition: none; }
}
/* /Components/GiftPad.razor.rz.scp.css */
/* Rhodia-style top-staple pad twin. Geometry from GiftPadCatalog CSS vars. The page, the
   frame, the corners and the written rows are page.css; this is the pad's own furniture. */

/* sized by the writer's hand (the grip or the wheel): no cap on how tall it grows */
.gift-pad-root.is-framed[b-uthjjgc1j3]  .journal-stage {
    aspect-ratio: calc(var(--pad-w) / var(--pad-h));
    max-height: none;
}

/* a vertical swipe turns a sheet; a horizontal one still scrolls the desk.
   The stage is TwinStage's: ::deep reaches it. */
[b-uthjjgc1j3] .journal-stage {
    touch-action: pan-x;
    /* Cap is soft: the journals / writing desk set the real box via --journey-stage-max-*. */
    max-width: min(720px, 100%);
    max-height: min(85dvh, 920px);
    aspect-ratio: calc(var(--pad-w) / var(--pad-h));
}

.book.pad-book[b-uthjjgc1j3] {
    width: var(--pad-w);
    height: var(--pad-h);
}

.pad-board[b-uthjjgc1j3] {
    position: absolute;
    inset: 1.5mm 0 0 0;
    border-radius: 0 0 1.5mm 1.5mm;
    background:
        linear-gradient(180deg, #c4b89a 0%, #b7aa8a 55%, #a89870 100%);
    box-shadow: 0 2mm 4mm rgba(40, 30, 10, 0.18);
}

/* Closed Rhodia front cover — orange or black, QS lockup (journal cover parallel). */
.pad-front-cover[b-uthjjgc1j3] {
    position: absolute;
    inset: 0;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}
.pad-front-cover-face[b-uthjjgc1j3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1mm;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--pad-cover, var(--pad-cover-default)) 92%, #fff) 0%, var(--pad-cover, var(--pad-cover-default)) 42%, color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 55%, var(--pad-cover, var(--pad-cover-default))) 100%);
    color: var(--pad-cover-type, var(--pad-cover-type-default));
    box-shadow:
        inset 0 0 0 0.35mm rgba(0, 0, 0, 0.14),
        inset 0 2mm 4mm rgba(255, 255, 255, 0.08),
        0 2mm 6mm rgba(40, 30, 10, 0.22);
}
.pad-front-cover-center[b-uthjjgc1j3] {
    gap: 2.5mm;
    max-width: 78%;
    text-align: center;
}
.pad-front-cover-mark[b-uthjjgc1j3] {
    width: 16mm;
    height: 16mm;
    margin-bottom: 1mm;
}
.pad-front-cover-word[b-uthjjgc1j3] {
    font-size: 5.2mm;
    letter-spacing: 0.38em;
    text-indent: 0.38em;
}
.pad-front-cover-title[b-uthjjgc1j3] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 5.5mm;
    letter-spacing: 0.1em;
    line-height: 1.15;
    text-wrap: balance;
}
.pad-front-cover-rule[b-uthjjgc1j3] {
    display: block;
    width: 22mm;
    height: 0.35mm;
    margin: 1mm 0;
    background: currentColor;
    opacity: 0.45;
}
.pad-front-cover-sub[b-uthjjgc1j3] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 3mm;
    opacity: 0.88;
}
.pad-front-cover-format[b-uthjjgc1j3] {
    position: absolute;
    bottom: 7mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 2.6mm;
    letter-spacing: 0.22em;
    opacity: 0.75;
}
.pad-front-cover-open[b-uthjjgc1j3] {
    position: absolute;
    right: 5mm;
    bottom: 3mm;
    font-family: var(--serif);
    font-style: italic;
    font-size: 3mm;
    opacity: 0.72;
}
.pad-front-cover:hover .pad-front-cover-face[b-uthjjgc1j3],
.pad-front-cover:focus-visible .pad-front-cover-face[b-uthjjgc1j3] {
    box-shadow:
        inset 0 0 0 0.35mm rgba(0, 0, 0, 0.18),
        inset 0 2mm 4mm rgba(255, 255, 255, 0.12),
        0 3mm 8mm rgba(40, 30, 10, 0.26);
}
.pad-front-cover:focus-visible[b-uthjjgc1j3] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.pad-cover-back[b-uthjjgc1j3] {
    position: absolute;
    left: -2mm;
    right: -2mm;
    top: 8mm;
    bottom: -3mm;
    border-radius: 1mm;
    background: var(--pad-cover, var(--pad-cover-default));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    z-index: 0;
}

.pad-stack[b-uthjjgc1j3] {
    position: absolute;
    top: 0;
    left: 2mm;
    right: 2mm;
    height: var(--pad-stub);
    background:
        repeating-linear-gradient(
            180deg,
            #eceae4 0 0.35mm,
            #ddd9cf 0.35mm 0.55mm
        );
    z-index: 1;
    box-shadow: 0 1mm 2mm rgba(0, 0, 0, 0.12);
}

.pad-leaf[b-uthjjgc1j3] {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pad-w);
    height: var(--pad-h);
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    box-shadow:
        0.4mm 0.8mm 2mm rgba(40, 30, 10, 0.16),
        0 0 0 0.3mm rgba(0, 0, 0, 0.06);
}

/* the staple band: printed on the stub, not written */
.pad-header[b-uthjjgc1j3] {
    height: var(--pad-stub);
    flex: 0 0 var(--pad-stub);
    /* the pad's own cover colour — Rhodia orange unless the writer chose another — as the
       threshold and the shelf already draw it */
    background: var(--pad-cover, var(--pad-cover-default));
    color: var(--pad-cover-type, var(--pad-cover-type-default));
    display: grid;
    grid-template-columns: 10mm 1fr auto;
    align-items: center;
    gap: 3mm;
    padding: 0 4mm 0 3mm;
    font-size: 2.6mm;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pad-header-mark[b-uthjjgc1j3] {
    width: 6mm;
    height: 6mm;
    opacity: 0.9;
}
.pad-header-label[b-uthjjgc1j3] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-header-sheet[b-uthjjgc1j3] { letter-spacing: 0.12em; opacity: 0.8; font-size: 2.2mm; }

.pad-perf[b-uthjjgc1j3] {
    height: 0;
    border-bottom: 0.35mm dashed color-mix(in srgb, #111 55%, transparent);
    margin: 0;
    position: relative;
    z-index: 3;
}
.pad-perf[b-uthjjgc1j3]::before,
.pad-perf[b-uthjjgc1j3]::after {
    content: "";
    position: absolute;
    top: -1.1mm;
    width: 2.2mm;
    height: 2.2mm;
    border-radius: 50%;
    background: var(--pad-board, #111);
}
.pad-perf[b-uthjjgc1j3]::before { left: 4mm; }
.pad-perf[b-uthjjgc1j3]::after { right: 4mm; }

/* the detachable leaf below the perforation: the pad's own margins, no page-number band */
[b-uthjjgc1j3] .pad-page.page {
    --page-margin-x: var(--pad-margin-x);
    --page-margin-top: var(--pad-margin-top);
    --page-margin-bottom: var(--pad-margin-bottom);
    --page-foot: 0mm;
    position: relative;
    flex: 1;
    inset: auto;
    height: var(--pad-leaf-h);
    border: none;
    border-radius: 0;
    background-color: var(--sheet);
}

.pad-torn[b-uthjjgc1j3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4mm;
    padding: 8mm;
    background:
        linear-gradient(180deg, transparent 0 2mm, var(--sheet) 8mm);
    border-top: 1.2mm dashed color-mix(in srgb, #111 35%, transparent);
}
.pad-torn-title[b-uthjjgc1j3] {
    margin: 0;
    font-family: var(--serif);
    font-size: 5mm;
    font-style: italic;
    color: var(--text-secondary);
}
.pad-torn-sub[b-uthjjgc1j3] {
    margin: 0;
    font-family: var(--hand);
    font-size: 4.2mm;
}
.pad-torn-hint[b-uthjjgc1j3] {
    margin: 0;
    font-size: 3mm;
    color: var(--text-secondary);
    text-align: center;
}

.pad-leaf.is-torn[b-uthjjgc1j3]  .pad-page { display: none; }

/* a sheet on its way over the staple */
.pad-flip[b-uthjjgc1j3] {
    z-index: 5;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform;
}
/* Held flat for the ink host's measure only (data-ink-tilt). A sheet coming back over the
   staple starts upside down, and measured that way its lines were inked in reverse order. */
.pad-flip.is-square[b-uthjjgc1j3] { transform: none !important; }
/* /Components/GiftPadSetup.razor.rz.scp.css */
.gift-pad-setup[b-pwewr1hkav] {
    width: 100%;
    max-width: 40rem;
    text-align: left;
}

.notebook-cover-swatch-face[b-pwewr1hkav] {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 7px;
    background: var(--swatch);
    border: 1.5px solid var(--swatch-border);
}

.notebook-cover-swatch.is-on .notebook-cover-swatch-face[b-pwewr1hkav] {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.notebook-spacing-num[b-pwewr1hkav] {
    width: 4.2rem;
    padding: 6px 8px;
    border: 1px solid var(--sheet-edge);
    border-radius: 6px;
    background: var(--sheet);
    color: var(--text-primary);
    font: inherit;
}

.gift-pad-setup-preview[b-pwewr1hkav] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 1.15rem;
}

.gift-pad-setup-cover[b-pwewr1hkav],
.gift-pad-setup-sheet[b-pwewr1hkav] {
    flex: 1;
    min-height: 7.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gift-pad-setup-cover[b-pwewr1hkav] {
    background: var(--pad-cover, var(--pad-cover-default));
    color: var(--pad-cover-type, var(--pad-cover-type-default));
    border: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
}

/* Staple band across the top of the preview — same words the shelf card wears. */
.gift-pad-setup-band[b-pwewr1hkav] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 55%, var(--pad-cover, var(--pad-cover-default)));
    border-bottom: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    color: #fff;
}

.gift-pad-setup-band-mark[b-pwewr1hkav] {
    width: 14px;
    height: 14px;
    opacity: 0.95;
}

.gift-pad-setup-band-word[b-pwewr1hkav] {
    font-family: var(--serif);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1;
}

.gift-pad-setup-cover-label[b-pwewr1hkav] {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 10px;
}

.gift-pad-setup-sheet[b-pwewr1hkav] {
    border: 1px solid var(--sheet-edge);
    color: var(--text-secondary);
}

.gift-pad-setup-sheet-label[b-pwewr1hkav] {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    background: color-mix(in srgb, var(--sheet) 88%, transparent);
    padding: 3px 8px;
    border-radius: 4px;
}

.gift-pad-formats[b-pwewr1hkav] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.gift-pad-format[b-pwewr1hkav] {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--sheet-edge);
    border-radius: 8px;
    background: var(--sheet);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.gift-pad-format.is-on[b-pwewr1hkav] {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}
.gift-pad-format-no[b-pwewr1hkav] {
    display: block;
    font-family: var(--serif);
    font-size: 1.05rem;
}
.gift-pad-format-size[b-pwewr1hkav],
.gift-pad-format-for[b-pwewr1hkav] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.gift-pad-howto[b-pwewr1hkav] {
    margin-top: 1.25rem;
}
.gift-pad-howto summary[b-pwewr1hkav] {
    cursor: pointer;
    font-size: 0.94rem;
    color: var(--ink);
}
/* /Components/HandCatalogBrowser.razor.rz.scp.css */
.hand-catalog-tabs[b-6aomuep7qt] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.hand-catalog-tab[b-6aomuep7qt] {
  appearance: none;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--text-secondary);
  font-family: var(--ui);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.hand-catalog-tab:hover[b-6aomuep7qt] {
  border-color: var(--text-secondary);
  color: var(--ink);
}

.hand-catalog-tab.is-on[b-6aomuep7qt] {
  background: var(--chosen);
  border-color: var(--chosen);
  color: var(--paper);
}

.hand-catalog-blurb[b-6aomuep7qt] {
  margin: 0 0 16px;
}



.hand-catalog-select[b-6aomuep7qt] {
  appearance: none;
  min-width: min(22rem, 100%);
  max-width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  background:
    var(--sheet)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E685A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
}

.hand-catalog-select:hover:not(:disabled)[b-6aomuep7qt] {
  border-color: var(--text-secondary);
}

.hand-catalog-select:disabled[b-6aomuep7qt] {
  opacity: 0.55;
  cursor: default;
}

.hand-catalog-select option[b-6aomuep7qt] {
  font-family: var(--ui);
}
/* /Components/HowToGive.razor.rz.scp.css */
.how-to-give[b-2mq18iowjc] {
    text-align: left;
}
.how-to-give section + section[b-2mq18iowjc] {
    margin-top: 1.15rem;
}
.how-to-list[b-2mq18iowjc] {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-primary);
    font-size: 0.94rem;
    line-height: 1.5;
}
.how-to-list li + li[b-2mq18iowjc] {
    margin-top: 0.35rem;
}
.how-to-sheet[b-2mq18iowjc] {
    margin: 0.35rem 0 0.5rem;
    font-family: var(--serif);
}
.how-to-envelope[b-2mq18iowjc] {
    margin-top: 0.65rem;
}
.how-to-give-sizes[b-2mq18iowjc] {
    list-style: disc;
}
/* /Components/InkHeart.razor.rz.scp.css */
/* The heart's ink follows the page it is drawn on; off a page it takes the desk's ink. It
   inks in when it is put on and fades when it is rubbed out, but a page turned to that
   already has one simply shows it. */
.ink-heart[b-qsgb6dwhga] {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    vertical-align: middle;
}
.ink-heart-line[b-qsgb6dwhga] {
    fill: none;
    stroke: var(--journal-ink, var(--ink));
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .32;
    transition: opacity .35s ease, stroke .35s ease;
}
.ink-heart-fill[b-qsgb6dwhga] {
    fill: var(--journal-ink, var(--ink));
    opacity: 0;
    transition: opacity .5s ease .1s, fill .35s ease;
}
/* On: a fuchsia red-pink fill (--favourite), not the page's bottle. */
.ink-heart.is-on .ink-heart-line[b-qsgb6dwhga] {
    stroke: var(--favourite);
    opacity: 1;
}
.ink-heart.is-on .ink-heart-fill[b-qsgb6dwhga] {
    fill: var(--favourite);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .ink-heart-line[b-qsgb6dwhga],
    .ink-heart-fill[b-qsgb6dwhga] { transition: none; }
}
/* /Components/Journal.razor.rz.scp.css */
/* ISO A5 twin: two 148×210 mm leaves in an open book, scaled to the stage by JS.
   Geometry uses CSS millimetres (see --a5-* / --journal-* in tokens). The page, the frame,
   the corners and the written rows are page.css; this is the book's own furniture. */

/* a horizontal swipe turns the page; the vertical one still scrolls the desk.
   The stage is TwinStage's: ::deep reaches it. */
[b-je1wunzh0f] .journal-stage {
    touch-action: pan-y;
    max-width: 940px;
    aspect-ratio: calc(var(--journal-book-w) / var(--journal-book-h));
    perspective: 2200px;
}
.journal-root.is-framed[b-je1wunzh0f]  .journal-stage {
    aspect-ratio: calc(var(--journal-book-w) / var(--journal-book-h));
}

/* ── cover ──
   Coloured board (preset via --cover*) with a quiet paper grain and soft
   handling wear — corners rubbed, edges slightly darker, dye a little uneven. */
.cover[b-je1wunzh0f] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    perspective: 1600px;
    perspective-origin: 28% 48%;
}
/* The book's thickness, as the fore-edge shows it: the 80-sheet book's 1.5mm block, scaled by
   its sheets (--journal-sheets, from NotepadCatalog.BookCssVars). Only the two fore-edge
   blocks read it; the boards and their fold animations keep their geometry. */
.book[b-je1wunzh0f] {
    --journal-fore-edge: calc(1.5mm * var(--journal-sheets, 80) / 80);
}
/* Board + page block, aligned like an open spread: spine left, fore-edge right. */
.cover-stack[b-je1wunzh0f] {
    position: absolute;
    top: var(--journal-leaf-top);
    left: 0;
    width: var(--journal-book-w);
    height: var(--a5-h);
    transform-style: preserve-3d;
}
.cover-board-wrap[b-je1wunzh0f] {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--a5-w);
    height: var(--a5-h);
    /* Flat by default — 3D only while the close animation swings the board. */
    transform: none;
    transform-origin: left center;
}
/* The leaves under the board: fore-edge, slightly opened toward the reader. */
.cover-pages[b-je1wunzh0f] {
    position: absolute;
    left: calc(var(--a5-w) - 1.2mm);
    top: 1.2mm;
    width: calc(var(--journal-book-w) - var(--a5-w) + var(--journal-fore-edge, 1.5mm));
    height: calc(var(--a5-h) - 2.4mm);
    border-radius: 0 1.2mm 1.2mm 0;
    transform: rotateY(11deg) translateZ(-0.4mm);
    transform-origin: left center;
    backface-visibility: hidden;
    background:
        linear-gradient(90deg, rgba(40, 30, 14, .22) 0%, rgba(40, 30, 14, .08) 8%, transparent 22%),
        repeating-linear-gradient(
            180deg,
            #F8F3E8 0 0.32mm,
            #EDE4D0 0.32mm 0.62mm,
            #E2D9C3 0.62mm 0.95mm
        );
    box-shadow:
        inset 2.5mm 0 5mm rgba(255, 252, 240, .45),
        inset -1mm 0 2mm rgba(50, 38, 18, .12),
        0.6mm 0.8mm 1.6mm rgba(40, 30, 14, .18);
}
/* Wax ribbon on the closed board. Hangs from the top edge, notched like a bookmark. */
.cover-bookmark[b-je1wunzh0f] {
    position: absolute;
    z-index: 6;
    top: calc(var(--journal-leaf-top) + 4mm);
    left: calc(var(--a5-w) - 27mm);
    width: 9mm;
    height: 28mm;
    padding: 0;
    border: none;
    background: var(--wax);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    cursor: pointer;
    filter: drop-shadow(0.4mm 0.6mm 0.4mm rgba(43, 42, 36, .28));
}
.cover-bookmark:hover[b-je1wunzh0f],
.cover-bookmark:focus-visible[b-je1wunzh0f] {
    background: var(--wax-hover);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.cover-shadow[b-je1wunzh0f] {
    position: absolute;
    inset: 0;
    border-radius: calc(4mm * var(--cover-round, 1));
    background:
        radial-gradient(ellipse 70% 55% at 40% 35%, #E0D2A8 0%, #D9CBA8 55%, #C9BB92 100%);
    transform: translate(2.5mm, 3mm);
    filter: blur(0.4px);
}
/* The ribbon marker hangs from between the leaves, under the board's foot edge. */
.cover-ribbon[b-je1wunzh0f] {
    position: absolute;
    top: calc(var(--journal-leaf-top) + var(--a5-h) - 3mm);
    left: calc(var(--a5-w) * 0.14);
    width: 7mm;
    height: 24mm;
    background: var(--wax);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    filter: drop-shadow(0.3mm 0.5mm 0.3mm rgba(43, 42, 36, .25));
    pointer-events: none;
}
/* Shut front/back: the same board as a journal on the desk (journal-shelf-cover).
   Fill the wrap — never rely on intrinsic size alone (an empty back would collapse). */
.cover-board-wrap > .journal-shelf-cover[b-je1wunzh0f] {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: calc(var(--a5-h) * 10 / 210);
    border-radius: 3px calc(10px * var(--cover-round, 1)) calc(10px * var(--cover-round, 1)) 3px;
    color: var(--cover-type, var(--eco-yellow-type));
    border: 1px solid var(--cover-border, var(--eco-yellow-border));
    box-shadow: 6px 10px 22px rgba(0, 0, 0, .32), 1px 2px 3px rgba(0, 0, 0, .25);
}
.cover-board-wrap > .journal-shelf-back[b-je1wunzh0f] {
    border-radius: calc(10px * var(--cover-round, 1)) 3px 3px calc(10px * var(--cover-round, 1));
    box-shadow: -6px 10px 22px rgba(0, 0, 0, .28), -1px 2px 3px rgba(0, 0, 0, .22);
    transform: scaleX(-1);
}
.cover-board-wrap .journal-shelf-mark[b-je1wunzh0f] {
    width: calc(var(--a5-w) * 42 / 148);
    height: calc(var(--a5-h) * 42 / 210);
    color: var(--cover-mark, var(--ink));
    flex-shrink: 0;
}
.cover-board-wrap .journal-shelf-id[b-je1wunzh0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--a5-h) * 2 / 210);
    max-width: calc(var(--a5-w) - 8mm);
}
.cover-board-wrap .journal-shelf-title[b-je1wunzh0f] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: calc(var(--a5-h) * 14 / 210);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    overflow-wrap: anywhere;
    margin-bottom: calc(var(--a5-h) * 2 / 210);
}
.cover-board-wrap .journal-shelf-vol[b-je1wunzh0f] {
    font-family: var(--serif);
    font-size: calc(var(--a5-h) * 15 / 210);
    letter-spacing: 0.08em;
}
.cover-board-wrap .journal-shelf-date[b-je1wunzh0f] {
    font-family: var(--serif);
    font-style: italic;
    font-size: calc(var(--a5-h) * 13 / 210);
    letter-spacing: 0.01em;
    text-align: center;
    opacity: 0.9;
}

/* The board's surface — dye, texture, sheen and elastic — is .qs-cover-board (book.css),
   set by the journal's cover style. */
.cover-face[b-je1wunzh0f] {
    position: relative; width: var(--a5-w); height: var(--a5-h); border-radius: calc(4mm * var(--cover-round, 1));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cover-border, var(--eco-yellow-border)) 78%, var(--cover-shade, var(--eco-yellow-type)));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, white 22%, transparent),
        inset 0 0 48px color-mix(in srgb, var(--cover-shade, var(--eco-yellow-type)) 14%, transparent),
        inset 0 -20px 40px color-mix(in srgb, var(--cover-shade, var(--eco-yellow-type)) 12%, transparent),
        inset 0 14px 28px color-mix(in srgb, white 14%, transparent);
}
/* Handling wear: corners rubbed, a soft scuff, edges a little darker. A worn style (paper,
   leather) keeps all of it; a coated one (matte, card) almost none. */
.cover-face[b-je1wunzh0f]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: var(--cover-wear, 1);
    background:
        radial-gradient(ellipse 95% 70% at 6% 4%, rgba(60, 48, 20, 0.16), transparent 58%),
        radial-gradient(ellipse 85% 65% at 96% 97%, rgba(50, 40, 16, 0.18), transparent 55%),
        radial-gradient(ellipse 55% 42% at 92% 10%, rgba(70, 55, 24, 0.11), transparent 62%),
        radial-gradient(ellipse 48% 38% at 14% 82%, rgba(50, 40, 16, 0.10), transparent 58%),
        radial-gradient(ellipse 42% 22% at 38% 48%, rgba(60, 48, 20, 0.07), transparent 72%),
        radial-gradient(ellipse 20% 11% at 24% 42%, rgba(80, 58, 8, 0.09), transparent 72%),
        radial-gradient(ellipse 16% 9% at 72% 58%, rgba(80, 58, 8, 0.07), transparent 70%),
        radial-gradient(ellipse 12% 7% at 58% 28%, rgba(255, 236, 170, 0.14), transparent 68%),
        linear-gradient(to right, rgba(90, 68, 12, 0.14), transparent 7%, transparent 93%, rgba(90, 68, 12, 0.16)),
        linear-gradient(to bottom, rgba(255, 240, 180, 0.16), transparent 11%, transparent 89%, rgba(90, 68, 12, 0.15));
    box-shadow: inset 0 0 0 1px rgba(130, 98, 18, 0.14);
}
.cover-face > *[b-je1wunzh0f] { position: relative; z-index: 2; }
.cover-center[b-je1wunzh0f] { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--cover-mark, var(--ink)); }
.cover-mark[b-je1wunzh0f] {
    width: 96px;
    height: 96px;
    color: var(--cover-mark, var(--ink));
    margin-bottom: 6px;
    opacity: 0.92;
}
.cover-word[b-je1wunzh0f] {
    font-family: var(--serif); font-weight: 600; font-size: 40px;
    letter-spacing: 0.42em; text-indent: 0.42em; color: var(--cover-type, var(--eco-yellow-type)); line-height: 1.05;
    opacity: 0.94;
}
/* The writer's own title on the board, in place of the QUIET / STANZA lockup. */
.cover-title[b-je1wunzh0f] {
    font-family: var(--serif); font-weight: 600;
    letter-spacing: 0.12em; text-indent: 0.12em; color: var(--cover-type, var(--eco-yellow-type));
    line-height: 1.15; text-align: center; text-wrap: balance;
    max-width: calc(var(--a5-w) - 24mm);
    overflow-wrap: anywhere;
    opacity: 0.94;
}
.cover-title-lg[b-je1wunzh0f] { font-size: 40px; }
.cover-title-md[b-je1wunzh0f] { font-size: 30px; }
.cover-title-sm[b-je1wunzh0f] { font-size: 23px; letter-spacing: 0.08em; text-indent: 0.08em; }
.cover-rule[b-je1wunzh0f] { width: 120px; height: 1.5px; background: var(--cover-rule, #C79E0C); margin: 6px 0; opacity: 0.88; }
.cover-sub[b-je1wunzh0f] { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--cover-type, var(--eco-yellow-type)); opacity: 0.92; }
.cover-footer[b-je1wunzh0f] {
    position: absolute; bottom: 26px; font-size: 10.5px; letter-spacing: 0.22em; color: var(--cover-accent, #A8850B);
    opacity: 0.88;
}
.cover-open[b-je1wunzh0f] { position: absolute; bottom: 12px; right: 20px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cover-accent, #B08E10); }

/* ── the cover's fold ──
   Shut, a board lies on the left leaf's slot: the fit shows that half alone. While the book is
   moved for a fold (data-cover-at, journal.js) or the board swings (.cover-slot-right), it may
   lie on the right leaf instead — where a shut front sits on its open spread. The front is
   hinged at its left edge, the back at its right, and each board has two faces: the coloured
   board, and on its inside the paper of the leaf that turns with it, so at the end of a swing
   the inside lies exactly where that page is and the page takes over unseen. */
.cover-rear[b-je1wunzh0f] { z-index: 8; cursor: default; }
.cover-pages[b-je1wunzh0f] { display: none; }
.journal-root:is([data-cover-at="right"], .cover-slot-right) .cover-board-wrap[b-je1wunzh0f] {
    left: calc(var(--a5-w) + var(--journal-gutter));
}
.journal-root[data-cover-at] .cover-bookmark[b-je1wunzh0f] { display: none; }
/* A board is the size of the cover it is: the page, and round it the margin the open book
   shows — the band over the top and the trim at the foot (.band, .band-edge). */
.cover-board-wrap[b-je1wunzh0f] {
    top: calc(-1 * var(--journal-leaf-top));
    height: var(--journal-book-h);
    transform-style: preserve-3d;
}
.cover:not(.cover-rear) .cover-board-wrap[b-je1wunzh0f] { transform-origin: left center; }
.cover-rear .cover-board-wrap[b-je1wunzh0f] { transform-origin: right center; }
.cover-board-wrap > .journal-shelf-cover[b-je1wunzh0f] { backface-visibility: hidden; }
.cover-board-inside[b-je1wunzh0f] {
    position: absolute;
    inset: 0;
    display: none;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    border-radius: 2mm 2mm 1.2mm 1.2mm;
    background: var(--cover, var(--eco-yellow));
}
.cover-board-inside[b-je1wunzh0f]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--journal-leaf-top);
    height: var(--a5-h);
    background: var(--paper, #FBF7EC);
    box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .08);
}
.journal-root:is(.is-opening-cover, .is-closing-cover, .is-opening-rear, .is-closing-rear) .cover-board-inside[b-je1wunzh0f] { display: block; }

/* While it swings: over the spread, the hand still off it. */
.journal-root:is(.is-opening-cover, .is-closing-cover, .is-opening-rear, .is-closing-rear) .spread[b-je1wunzh0f] { z-index: 2; }
.journal-root:is(.is-opening-cover, .is-closing-cover, .is-opening-rear, .is-closing-rear) .cover[b-je1wunzh0f] {
    z-index: 12;
    pointer-events: none;
    perspective: 1900px;
    perspective-origin: 50% 40%;
}
.journal-root.is-opening-cover .cover:not(.cover-rear) .cover-board-wrap[b-je1wunzh0f] {
    animation: cover-front-open-b-je1wunzh0f var(--close-ms, 620ms) var(--fold-ease) forwards;
}
.journal-root.is-closing-cover .cover:not(.cover-rear) .cover-board-wrap[b-je1wunzh0f] {
    animation: cover-front-shut-b-je1wunzh0f var(--close-ms, 620ms) var(--fold-ease) forwards;
}
.journal-root.is-opening-rear .cover-rear .cover-board-wrap[b-je1wunzh0f] {
    animation: cover-rear-open-b-je1wunzh0f var(--close-ms, 620ms) var(--fold-ease) forwards;
}
.journal-root.is-closing-rear .cover-rear .cover-board-wrap[b-je1wunzh0f] {
    animation: cover-rear-shut-b-je1wunzh0f var(--close-ms, 620ms) var(--fold-ease) forwards;
}
.journal-root[b-je1wunzh0f] { --fold-ease: cubic-bezier(.55, .06, .22, 1); }
/* A board lifts a little off the block as it stands up, and settles back flat. */
@keyframes cover-front-open-b-je1wunzh0f {
    from { transform: rotateY(0deg); }
    50% { transform: rotateY(-90deg) translateZ(3mm); }
    to { transform: rotateY(-180deg); }
}
@keyframes cover-front-shut-b-je1wunzh0f {
    from { transform: rotateY(-180deg); }
    50% { transform: rotateY(-90deg) translateZ(3mm); }
    to { transform: rotateY(0deg); }
}
@keyframes cover-rear-open-b-je1wunzh0f {
    from { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg) translateZ(3mm); }
    to { transform: rotateY(180deg); }
}
@keyframes cover-rear-shut-b-je1wunzh0f {
    from { transform: rotateY(180deg); }
    50% { transform: rotateY(90deg) translateZ(3mm); }
    to { transform: rotateY(0deg); }
}
/* The light leaves a board as it stands up and comes back as it lies down. */
.cover-board-wrap[b-je1wunzh0f]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(30, 22, 10, .28), rgba(30, 22, 10, .12));
}
.journal-root:is(.is-opening-cover, .is-closing-cover, .is-opening-rear, .is-closing-rear) .cover-board-wrap[b-je1wunzh0f]::after {
    animation: cover-shade-b-je1wunzh0f var(--close-ms, 620ms) var(--fold-ease) forwards;
}
@keyframes cover-shade-b-je1wunzh0f {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* The leaf that turns with the board: the board's inside is its paper for the swing. Shutting,
   the page's writing fades into that paper as it lifts, and the page under it has gone by the
   time the board stands up; opening, the other way about. */
.journal-root:is(.is-opening-cover, .is-opening-rear) .cover-board-inside[b-je1wunzh0f] {
    animation: cover-inside-out-b-je1wunzh0f var(--close-ms, 620ms) linear forwards;
}
.journal-root:is(.is-closing-cover, .is-closing-rear) .cover-board-inside[b-je1wunzh0f] {
    animation: cover-inside-in-b-je1wunzh0f var(--close-ms, 620ms) linear forwards;
}
@keyframes cover-inside-out-b-je1wunzh0f { from, 72% { opacity: 1; } to { opacity: 0; } }
@keyframes cover-inside-in-b-je1wunzh0f { from { opacity: 0; } 28%, to { opacity: 1; } }
.journal-root.is-opening-cover:not([data-fit="page"]) .leaf-host.left:not(.ink-prefetch)[b-je1wunzh0f],
.journal-root.is-opening-rear:not([data-fit="page"]) .leaf-host.right:not(.ink-prefetch)[b-je1wunzh0f] {
    animation: cover-page-in-b-je1wunzh0f var(--close-ms, 620ms) linear both;
}
.journal-root.is-closing-cover:not([data-fit="page"]) .leaf-host.left:not(.ink-prefetch)[b-je1wunzh0f],
.journal-root.is-closing-rear:not([data-fit="page"]) .leaf-host.right:not(.ink-prefetch)[b-je1wunzh0f] {
    animation: cover-page-out-b-je1wunzh0f var(--close-ms, 620ms) linear both;
}
@keyframes cover-page-in-b-je1wunzh0f { from, 49% { visibility: hidden; } 50%, to { visibility: visible; } }
@keyframes cover-page-out-b-je1wunzh0f { from, 49% { visibility: visible; } 50%, to { visibility: hidden; } }

/* The open book's margin is its two boards: the front's half of it goes with the front board,
   the back's half (and the fore-edge) with the back, and shows again once it has landed. */
.journal-root:is(.is-opening-cover:not(.cover-fade), .is-closing-cover) :is(.band, .band-edge-foot)[b-je1wunzh0f] { clip-path: inset(0 0 0 50%); }
.journal-root:is(.is-opening-rear:not(.cover-fade), .is-closing-rear) :is(.band, .band-edge-foot)[b-je1wunzh0f] { clip-path: inset(0 50% 0 0); }
.journal-root:is(.is-opening-rear:not(.cover-fade), .is-closing-rear) .band-edge-fore[b-je1wunzh0f] { visibility: hidden; }

/* The lockup is only on the board while it lies flat. */
.journal-root:is(.is-opening-cover, .is-closing-cover) .cover-board-wrap :is(.journal-shelf-mark, .journal-shelf-id)[b-je1wunzh0f] {
    opacity: 0;
    transition: opacity 120ms ease-out;
}
.journal-root.is-closing-cover.cover-fade .cover-board-wrap :is(.journal-shelf-mark, .journal-shelf-id)[b-je1wunzh0f] {
    opacity: 1;
    transition: opacity 300ms ease-out;
}

/* Then the hand-over. Opening: the board has gone onto its page, and goes. Shutting: the board
   is down, and the pages under it go. */
.journal-root:is(.is-opening-cover, .is-opening-rear).cover-fade .cover[b-je1wunzh0f] { opacity: 0; transition: opacity 180ms ease-out; }
.journal-root:is(.is-closing-cover, .is-closing-rear).cover-fade .spread[b-je1wunzh0f] { opacity: 0; transition: opacity 180ms ease-out; }

.journal-root.is-closed:not(.is-closing-cover) .cover-bookmark[b-je1wunzh0f] {
    top: calc(var(--journal-leaf-top) - 1.5mm);
    left: calc(var(--a5-w) - 18mm);
}

@media (prefers-reduced-motion: reduce) {
    .journal-root .cover-board-wrap[b-je1wunzh0f],
    .journal-root .cover-board-wrap[b-je1wunzh0f]::after,
    .journal-root .cover-board-inside[b-je1wunzh0f],
    .journal-root .leaf-host[b-je1wunzh0f] { animation: none !important; }
    .journal-root:is(.is-opening-cover, .is-opening-rear) .cover[b-je1wunzh0f] { opacity: 0; }
}

/* ── spread ── */
.band[b-je1wunzh0f] {
    position: absolute; top: 0; left: 0; right: 0;
    height: var(--journal-band);
    border-radius: 2mm 2mm 0 0;
    z-index: 3;
}
/* Very thin cover-colour edges: foot and right fore-edge. Not interactive. */
.band-edge[b-je1wunzh0f] {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.band-edge-foot[b-je1wunzh0f] {
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.7mm;
    border-radius: 0 0 1.2mm 1.2mm;
}
.band-edge-fore[b-je1wunzh0f] {
    top: var(--journal-band);
    right: 0;
    bottom: 0;
    width: 0.7mm;
    border-radius: 0 0 1.2mm 0;
}
.spread[b-je1wunzh0f] { position: absolute; inset: 0; }
.leaf-host[b-je1wunzh0f] {
    position: absolute;
    top: var(--journal-leaf-top);
    width: var(--a5-w);
    height: var(--a5-h);
}
.leaf-host.left[b-je1wunzh0f] { left: 0; }
.leaf-host.right[b-je1wunzh0f] { left: calc(var(--a5-w) + var(--journal-gutter)); }
/* The next spread, inked ahead out of sight: laid out exactly as a page, never seen or touched. */
.leaf-host.ink-prefetch[b-je1wunzh0f] { visibility: hidden; pointer-events: none; z-index: -1; }

/* Right fore-edge: thin stack of sheets under the top page (kept inside the leaf). */
.leaf-host.right[b-je1wunzh0f]::before {
    content: "";
    position: absolute;
    top: 1mm;
    right: 0;
    bottom: 1.5mm;
    width: var(--journal-fore-edge, 1.5mm);
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0.5mm 0.5mm 0;
    background:
        linear-gradient(90deg, rgba(90, 70, 40, 0.08), transparent 50%),
        repeating-linear-gradient(
            180deg,
            #F8F3E8 0 0.3mm,
            #EDE4D0 0.3mm 0.55mm,
            #E2D9C3 0.55mm 0.8mm
        );
    box-shadow: 0.3mm 0.3mm 0.5mm rgba(70, 55, 30, 0.10);
}
/* A right-hand page: here, or the face of a turning leaf that is one or is landing as one,
   so the leaf in the air already looks like the page it becomes. */
:is(.leaf-host.right, .leaf-right .leaf-front, .leaf-left .leaf-back)[b-je1wunzh0f]  .page {
    right: 1.2mm;
    z-index: 1;
    border-radius: 0 0.3mm 0.3mm 0;
    box-shadow:
        0.3mm 0 0 #F3ECDA,
        0.55mm 0.15mm 0 #E8DFC8,
        0.8mm 0.3mm 0 #DED4BC,
        1.05mm 0.4mm 0 #D4C9B0,
        1.3mm 0.5mm 0.8mm rgba(70, 55, 30, 0.10);
}

/* ── the spine ──
   Solid paper, so nothing under the book shows between the leaves, sewn down the fold with
   a paper-coloured thread. The fold is darkest at its centre, and each page curves away into
   it (the shade on the leaves below), so the spread reads as bound rather than laid flat. */
.gutter[b-je1wunzh0f] {
    --stitch: repeating-linear-gradient(180deg,
        color-mix(in srgb, var(--sheet) 82%, white) 0 3.2mm, transparent 3.2mm 5.2mm);
    --stitch-shadow: repeating-linear-gradient(180deg,
        rgba(50, 38, 16, .38) 0 3.2mm, transparent 3.2mm 5.2mm);
    position: absolute;
    top: var(--journal-leaf-top);
    left: var(--a5-w);
    width: var(--journal-gutter);
    height: var(--a5-h);
    /* over the turning leaf (5): the leaf hinges on the fold, it never covers the stitching */
    z-index: 6;
    /* Its own layer, always: promoted only while a leaf turned over it, it was painted again
       when the turn ended and the stitching showed up a moment late. */
    will-change: transform;
    /* The thread, its shadow a fraction below and to the right, the fold darkest at its
       centre, and the paper. Plain gradients, no filter, so nothing waits on a repaint. */
    background:
        var(--stitch) 50% 6mm / 0.6mm calc(100% - 12mm) no-repeat,
        var(--stitch-shadow) calc(50% + 0.15mm) 6.3mm / 0.6mm calc(100% - 12mm) no-repeat,
        linear-gradient(90deg, rgba(60, 45, 20, .16), rgba(60, 45, 20, .30) 50%, rgba(60, 45, 20, .16)),
        var(--sheet);
}
/* Each page curves down into the fold: the shade lies on the paper, under nothing. A turning
   leaf carries its shade with it, on whichever side of it meets the spine. */
.leaf-host[b-je1wunzh0f]::after,
.leaf-face[b-je1wunzh0f]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14mm;
    z-index: 2;
    pointer-events: none;
    /* A plain shade, not a multiply: Chrome drops a blend while a leaf turns in 3D beside
       it, and the shade vanished for the turn and came back after. */
}
.leaf-host.left[b-je1wunzh0f]::after,
.leaf-right .leaf-back[b-je1wunzh0f]::before,
.leaf-left .leaf-front[b-je1wunzh0f]::before {
    right: 0;
    background: linear-gradient(to left, rgba(70, 52, 22, .2), rgba(70, 52, 22, .06) 35%, transparent);
}
.leaf-host.right[b-je1wunzh0f]::after,
.leaf-right .leaf-front[b-je1wunzh0f]::before,
.leaf-left .leaf-back[b-je1wunzh0f]::before {
    left: 0;
    background: linear-gradient(to right, rgba(70, 52, 22, .2), rgba(70, 52, 22, .06) 35%, transparent);
}
/* Square, borderless edges at the spine, so the paper runs on into the fold. */
:is(.leaf-host.left, .leaf-right .leaf-back, .leaf-left .leaf-front)[b-je1wunzh0f]  .page {
    border-right: 0;
    border-radius: 1mm 0 0 1mm;
}
:is(.leaf-host.right, .leaf-right .leaf-front, .leaf-left .leaf-back)[b-je1wunzh0f]  .page {
    border-left: 0;
}

/* ── the riffle: blank leaves flicking over the spread, right to left, one after another ── */
.riffle[b-je1wunzh0f] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    perspective: 1600px;
    z-index: 6;
}
.riffle-leaf[b-je1wunzh0f] {
    position: absolute;
    top: var(--journal-leaf-top);
    left: calc(var(--a5-w) + var(--journal-gutter));
    width: var(--a5-w);
    height: var(--a5-h);
    transform-origin: calc(var(--journal-gutter) / -2) center;
    background:
        linear-gradient(to right, rgba(20, 16, 8, .18), transparent 30%),
        var(--sheet, #F6F1E6);
    box-shadow: -2px 0 6px rgba(20, 16, 8, .25);
    backface-visibility: hidden;
    transform: rotateY(0deg);
    animation: riffle-flip-b-je1wunzh0f .36s ease-in both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes riffle-flip-b-je1wunzh0f {
    0% { transform: rotateY(0deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: rotateY(-178deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .riffle[b-je1wunzh0f] { display: none; }
}

/* ── the turning leaf (3D) ── */
.leaf[b-je1wunzh0f] {
    position: absolute;
    top: var(--journal-leaf-top);
    width: var(--a5-w);
    height: var(--a5-h);
    transform-style: preserve-3d;
    z-index: 5;
}
/* Hinged on the middle of the spine, so a turned leaf lands exactly on the page it becomes;
   hinged on its own edge it landed a gutter's width off and jumped when it was lifted. */
.leaf-right[b-je1wunzh0f] { left: calc(var(--a5-w) + var(--journal-gutter)); transform-origin: calc(var(--journal-gutter) / -2) center; }
.leaf-left[b-je1wunzh0f] { left: 0; transform-origin: calc(100% + var(--journal-gutter) / 2) center; }
/* Held flat for the ink host's measure only (data-ink-tilt), so the writing on a turning leaf
   is laid out as on the page it is; !important outranks the turn's own animation. */
.leaf.is-square[b-je1wunzh0f],
.leaf.is-square .leaf-back[b-je1wunzh0f] { transform: none !important; }
/* Landed and waiting to be lifted: sit exactly as the host underneath — under the band
   (hosts are), no perspective rotate. At z-index 5 with rotateY(±180) the leaf covered the
   header strip and read a little tall until LiftLandedLeaf removed it. */
.leaf.is-landed[b-je1wunzh0f] {
    pointer-events: none;
    z-index: 2;
    transform: none !important;
}
.leaf.is-landed.leaf-right[b-je1wunzh0f] { left: 0; }
.leaf.is-landed.leaf-left[b-je1wunzh0f] { left: calc(var(--a5-w) + var(--journal-gutter)); }
.leaf.is-landed .leaf-front[b-je1wunzh0f] { visibility: hidden; }
.leaf.is-landed .leaf-back[b-je1wunzh0f] {
    transform: none !important;
    backface-visibility: visible;
}
.leaf-face[b-je1wunzh0f] { position: absolute; inset: 0; backface-visibility: hidden; }
.leaf-back[b-je1wunzh0f] { transform: rotateY(180deg); }
/* the shade across a leaf as it lifts: deepest at the vertical, set by the turn script */
.leaf-face[b-je1wunzh0f]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(20, 16, 8, .55), rgba(20, 16, 8, .12) 45%, transparent 80%);
    opacity: var(--turn-shade, 0);
    z-index: 4;
}
.leaf-left .leaf-face[b-je1wunzh0f]::after { background: linear-gradient(to left, rgba(20, 16, 8, .55), rgba(20, 16, 8, .12) 45%, transparent 80%); }
/* /Components/Journals/CardIndexBox.razor.rz.scp.css */
/* The card-index drawer stands on the bookcase's shelf at its far end, as the books stand. */
.card-index-box[b-pmm7nxj1lc] {
    flex: 0 0 auto;
    width: 64px;
    height: 55px;
    /* stood on the shelf board, as the bookend is: its foot where the books' feet are, and on
       a tier of its own no more headroom than it needs */
    align-self: flex-end;
    margin: 18px 4px 16px auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .4));
    transition: transform .15s ease;
}

.card-index-box-art[b-pmm7nxj1lc] {
    display: block;
    width: 100%;
    height: 100%;
}

.card-index-box:hover[b-pmm7nxj1lc],
.card-index-box:focus-visible[b-pmm7nxj1lc] {
    transform: translateY(-2px);
}

.card-index-box:focus-visible[b-pmm7nxj1lc] {
    outline: 2px solid var(--laurel, #5a7a5a);
    outline-offset: 3px;
    border-radius: 4px;
}
/* /Components/Journals/DeskInkwell.razor.rz.scp.css */
/* The inkwell on the desk pad: placed and carried as the pen is (--x, --y as fractions of the
   room it has to move in; --carry-x / --carry-y from qs-desk.js). 72 × 66 matches TOOLS there. */
.desk-inkwell[b-hsz8pyxnpi] {
    --well-w: 72px;
    --well-h: 66px;
    position: absolute;
    left: calc((100% - var(--well-w)) * var(--x, 0.97));
    top: calc((100% - var(--well-h)) * var(--y, 0.9));
    z-index: 880;
    width: var(--well-w);
    height: var(--well-h);
    padding: 0;
    border: none;
    background: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px));
    transition: transform .15s ease;
}

.desk-inkwell-art[b-hsz8pyxnpi] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.desk-inkwell:hover[b-hsz8pyxnpi],
.desk-inkwell:focus-visible[b-hsz8pyxnpi],
.desk-inkwell.is-open[b-hsz8pyxnpi] {
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) translateY(-2px);
}

.desk-inkwell.is-lifted[b-hsz8pyxnpi] {
    cursor: grabbing;
    transition: none;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) translateY(-5px);
    filter: drop-shadow(3px 9px 7px rgba(0, 0, 0, .3));
}

.desk-inkwell.is-landing[b-hsz8pyxnpi] { transition: none; }

.desk-inkwell:focus-visible[b-hsz8pyxnpi] {
    outline: 2px solid var(--laurel, #5a7a5a);
    outline-offset: 3px;
    border-radius: 8px;
}
/* /Components/Journals/DeskLetter.razor.rz.scp.css */
/* The letter on the pad: a portrait sheet a touch taller than a book, lying a little off
   square. Placed as the pen is (--x / --y are fractions of the room; qs-desk.js carries it
   through --carry-x / --carry-y). --letter-w / --letter-h match the size qs-desk.js gives it. */
.desk-letter[b-sh2cyav3ly] {
    --letter-w: 184px;
    --letter-h: 236px;
    position: absolute;
    left: calc((100% - var(--letter-w)) * var(--x, 0.62));
    top: calc((100% - var(--letter-h)) * var(--y, 0.04));
    z-index: 850;
    width: var(--letter-w);
    height: var(--letter-h);
    display: block;
    color: inherit;
    text-decoration: none;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) rotate(-1.2deg);
    transform-origin: 50% 50%;
    transition: transform .18s ease-out, filter .18s ease-out;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
}
.desk-letter:focus-visible[b-sh2cyav3ly] { outline: 2px solid var(--wax); outline-offset: 4px; border-radius: 2px; }

/* The sheet itself: the same letter paper as the big one (tokens.css), with its laid light,
   its make and the Qs watermark, and a shadow under it on the leather. */
.desk-letter-sheet[b-sh2cyav3ly] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px 12px 9px;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--letter-paper);
    background-image: var(--letter-light);
    box-shadow: var(--letter-shadow), 3px 8px 18px rgba(20, 24, 18, .34);
}
.desk-letter-sheet[b-sh2cyav3ly]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--letter-make);
    background-size: var(--letter-make-size);
    mix-blend-mode: multiply;
    opacity: .7;
    pointer-events: none;
}
.desk-letter-sheet[b-sh2cyav3ly]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #fff;
    -webkit-mask: var(--letter-watermark) center top / 240px 180px repeat;
    mask: var(--letter-watermark) center top / 240px 180px repeat;
    opacity: .5;
    pointer-events: none;
}

.desk-letter-eyebrow[b-sh2cyav3ly] {
    font-family: var(--serif);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The clipped card, as a small cream slip with its own edge. */
.desk-letter-card[b-sh2cyav3ly] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px 8px;
    border-radius: 1px;
    background: #FBF6E9;
    box-shadow: 0 0 0 1px rgba(90, 75, 45, .16), 1px 2px 3px rgba(40, 30, 14, .14);
}
.desk-letter-title[b-sh2cyav3ly] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.desk-letter-author[b-sh2cyav3ly] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The note in the librarian's hand and ink, as the big sheet has it, the webfont standing in
   for the ink at this size. */
.desk-letter-note[b-sh2cyav3ly] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    font-family: var(--hand);
    color: var(--letter-ink);
    overflow: hidden;
}
.desk-letter-head[b-sh2cyav3ly] {
    font-size: 11.5px;
    line-height: 1.3;
}
.desk-letter-text[b-sh2cyav3ly] {
    font-size: 10.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.desk-letter-sign[b-sh2cyav3ly] {
    margin-top: auto;
    align-self: flex-end;
    font-size: 10.5px;
    line-height: 1.3;
}

/* Under the pointer it lifts a little, as the pen does; carried, it comes right up. */
.desk-letter:hover:not(.is-lifted)[b-sh2cyav3ly],
.desk-letter:focus-visible:not(.is-lifted)[b-sh2cyav3ly] {
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) translateY(-3px) rotate(-0.6deg);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18));
}
.desk-letter.is-lifted[b-sh2cyav3ly] {
    cursor: grabbing;
    transition: none;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) scale(1.04) rotate(0.4deg);
    filter: drop-shadow(4px 14px 14px rgba(0, 0, 0, .3));
}
.desk-letter.is-landing[b-sh2cyav3ly] { transition: none; }

@media (max-width: 600px) {
    .desk-letter[b-sh2cyav3ly] { --letter-w: 148px; --letter-h: 190px; }
    .desk-letter-sheet[b-sh2cyav3ly] { padding: 8px 10px 7px; gap: 5px; }
    .desk-letter-text[b-sh2cyav3ly] { -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) {
    .desk-letter[b-sh2cyav3ly] { transition: none; }
}
/* /Components/Journals/DeskParcel.razor.rz.scp.css */
/* The parcel on the bookcase's shelf, beside the bookend: a wrapped journal laid on its side on
   the board (140px long, a journal spine's height), an object to take down. */
.desk-parcel[b-og4u1spsct] {
    flex: 0 0 auto;
    align-self: flex-end;
    display: block;
    width: 140px;
    height: 34px;
    margin: 18px 0 16px 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .35));
    transition: transform .15s ease;
}

.desk-parcel-art[b-og4u1spsct] {
    display: block;
    width: 100%;
    height: 100%;
}

.desk-parcel:hover[b-og4u1spsct],
.desk-parcel:focus-visible[b-og4u1spsct] {
    transform: translateY(-2px);
}

.desk-parcel:focus-visible[b-og4u1spsct] {
    outline: 2px solid var(--laurel, #5a7a5a);
    outline-offset: 4px;
    border-radius: 6px;
}
/* /Components/Journals/DeskPen.razor.rz.scp.css */
/* The pen on the desk pad: placed like a book (--x, --y as fractions of the room it has to move
   in), carried by qs-desk.js through --carry-x / --carry-y. 240 × 67 matches TOOLS.pen there. */
.desk-pen[b-x52j8ggjlt] {
    --pen-w: 240px;
    --pen-h: 67px;
    position: absolute;
    left: calc((100% - var(--pen-w)) * var(--x, 0.9));
    top: calc((100% - var(--pen-h)) * var(--y, 0.06));
    z-index: 900;
    width: var(--pen-w);
    height: var(--pen-h);
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px));
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
    transition: transform .15s ease;
}

.desk-pen-art[b-x52j8ggjlt] {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Under the pointer the pen stirs: it lifts a little off the pad and rolls towards the hand,
   with its shadow beneath it, so it reads as a thing to pick up (the nib, too, for the ink). */
.desk-pen:hover:not(.is-lifted)[b-x52j8ggjlt],
.desk-pen:has(:focus-visible):not(.is-lifted)[b-x52j8ggjlt] {
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) translateY(-3px) rotate(-1.5deg);
    filter: drop-shadow(3px 8px 6px rgba(0, 0, 0, .22));
}
.desk-pen:hover:not(.is-lifted) .desk-pen-art[b-x52j8ggjlt] {
    animation: desk-pen-stir-b-x52j8ggjlt .55s ease-out;
}
@keyframes desk-pen-stir-b-x52j8ggjlt {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(1.6deg); }
    70% { transform: rotate(-.6deg); }
    100% { transform: rotate(0deg); }
}

.desk-pen.is-lifted[b-x52j8ggjlt] {
    cursor: grabbing;
    transition: none;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) translateY(-4px) rotate(-2deg);
    filter: drop-shadow(4px 10px 8px rgba(0, 0, 0, .25));
}

.desk-pen.is-landing[b-x52j8ggjlt] { transition: none; }

/* The nib, a button of its own over the drawn point: a tap opens the nib and ink. */
.desk-pen-nib[b-x52j8ggjlt] {
    position: absolute;
    left: 6px;
    top: 21px;
    width: 51px;
    height: 27px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transform: rotate(-9deg);
}

/* a drop of the ink at the point */
.desk-pen-ink[b-x52j8ggjlt] {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
    opacity: .9;
}

.desk-pen-nib:hover[b-x52j8ggjlt],
.desk-pen-nib:focus-visible[b-x52j8ggjlt],
.desk-pen.is-open .desk-pen-nib[b-x52j8ggjlt] {
    outline: none;
    background: radial-gradient(closest-side, rgba(242, 194, 48, .35), transparent);
}

.desk-pen-nib:focus-visible[b-x52j8ggjlt] { box-shadow: 0 0 0 2px rgba(242, 194, 48, .7); }

@media (prefers-reduced-motion: reduce) {
    .desk-pen[b-x52j8ggjlt] { transition: none; }
    .desk-pen:hover:not(.is-lifted) .desk-pen-art[b-x52j8ggjlt] { animation: none; }
}
/* /Components/Journals/FilingChooser.razor.rz.scp.css */
/* The cover keeps the corner's whole width (FilingCover sizes itself by it); the arrows hang
   just outside it, either side, level with the board's middle, so coming and going they never
   move the book. Drawn in the leather's type colour, faint until wanted. */
.filing-chooser[b-a0qkvxw2bu] {
    position: relative;
    width: 100%;
}

.filing-arrow[b-a0qkvxw2bu] {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--on-leather, #e8e2d0);
    opacity: .55;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .2s ease, background-color .2s ease;
}
.filing-arrow-prev[b-a0qkvxw2bu] { right: calc(100% + 2px); }
.filing-arrow-next[b-a0qkvxw2bu] { left: calc(100% + 2px); }

.filing-arrow svg[b-a0qkvxw2bu] {
    display: block;
    width: 10px;
    height: 16px;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.filing-arrow:hover[b-a0qkvxw2bu],
.filing-arrow:focus-visible[b-a0qkvxw2bu] {
    opacity: 1;
    background: rgba(255, 255, 255, .08);
}
.filing-arrow:focus-visible[b-a0qkvxw2bu] {
    outline: 2px solid var(--on-leather, #e8e2d0);
    outline-offset: 1px;
}
.filing-arrow:disabled[b-a0qkvxw2bu] {
    opacity: .25;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .filing-arrow[b-a0qkvxw2bu] { transition: none; }
}
/* /Components/Journals/FilingCover.razor.rz.scp.css */
/* The filing cover takes the width it is given and draws the book at that width: the board is
   the shelf's 148 × 210, and every size on it is that shelf size scaled by the width, in
   container units (cqw), so 64px and 104px read as the same book. */
.filing-cover[b-6lq3duu2ba] {
    width: 100%;
    container-type: inline-size;
    line-height: 1;
}

/* ── the journal: the front board, as on the shelf (JournalShelfView) and the shut book ── */
.filing-board[b-6lq3duu2ba] {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 148 / 210;
    gap: 6.8cqw;
    padding: 0 6cqw;
    /* surface: .qs-cover-board (book.css) */
    border-radius: 2px calc(6px * var(--cover-round, 1)) calc(6px * var(--cover-round, 1)) 2px;
    color: var(--cover-type, var(--eco-yellow-type));
    border: 1px solid var(--cover-border, var(--eco-yellow-border));
    box-shadow: 3px 6px 14px rgba(0, 0, 0, .34), 1px 1px 2px rgba(0, 0, 0, .25);
}

.filing-mark[b-6lq3duu2ba] {
    width: 28.4cqw;
    height: 28.4cqw;
    color: var(--cover-mark, var(--ink));
}

.filing-id[b-6lq3duu2ba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4cqw;
    max-width: 100%;
    text-align: center;
}

.filing-title[b-6lq3duu2ba] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 9.5cqw;
    line-height: 1.2;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    margin-bottom: 1.4cqw;
}

.filing-vol[b-6lq3duu2ba] {
    font-family: var(--serif);
    font-size: 10.1cqw;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.filing-date[b-6lq3duu2ba] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 8.8cqw;
    letter-spacing: 0.01em;
    opacity: 0.9;
}

/* ── the gift pad: its top sheet on the board, as on the desk of Your journals ── */
.filing-pad[b-6lq3duu2ba] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 148 / 210;
}

.filing-pad-board[b-6lq3duu2ba] {
    position: absolute;
    top: 17%;
    right: 4%;
    bottom: 4%;
    left: 23%;
    border-radius: 2px 4px 4px 2px;
    background: var(--pad-cover, var(--pad-cover-default));
    border: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    box-shadow: 3px 6px 12px rgba(0, 0, 0, .32);
}

.filing-pad-leaf[b-6lq3duu2ba] {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 80%;
    height: 84%;
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: 1px;
    box-shadow: 2px 4px 8px rgba(43, 42, 36, .16);
    transform: rotate(-2deg);
    color: var(--ink);
}

/* The staple band across the top of the leaf: the pad's own colour, its words in white. */
.filing-pad-stub[b-6lq3duu2ba] {
    flex: 0 0 16cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    padding: 0 4cqw;
    background: var(--pad-cover, var(--pad-cover-default));
    border-bottom: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    color: #fff;
    overflow: hidden;
}

.filing-pad-stub-mark[b-6lq3duu2ba] {
    width: 8.8cqw;
    height: 8.8cqw;
    opacity: 0.95;
}

.filing-pad-stub-word[b-6lq3duu2ba] {
    font-family: var(--serif);
    font-size: 6.4cqw;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.filing-pad .filing-id[b-6lq3duu2ba] {
    flex: 1;
    justify-content: center;
    gap: 2cqw;
    padding: 0 5cqw 7cqw;
}

.filing-pad-no[b-6lq3duu2ba] {
    font-family: var(--ui);
    font-size: 7.4cqw;
    font-weight: 600;
    letter-spacing: 0.14em;
}

/* ── the cards: CardPackMini at its own small width, kept to the corner's right edge ── */
.filing-cover.is-card[b-6lq3duu2ba] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Journals/JournalSetupSheet.razor.rz.scp.css */
.journal-setup-sheet[b-5odqgdohs5] {
    width: min(720px, 100%);
}

.journal-setup-intent[b-5odqgdohs5] {
    margin: 0 0 16px;
    max-width: 40rem;
}

.journal-setup-intent p[b-5odqgdohs5] {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.journal-setup-intent .journal-setup-intent-lead[b-5odqgdohs5] {
    margin: 0 0 0.45rem;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.8vw, 1.45rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--ink-soft);
}

.journal-compare[b-5odqgdohs5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 2px 0 12px;
}

.journal-compare-card[b-5odqgdohs5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--sheet-edge);
    border-radius: 10px;
    background: var(--sheet);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.journal-compare-card.is-on[b-5odqgdohs5] {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.journal-compare-stage[b-5odqgdohs5] {
    width: 100%;
    height: 148px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--paper) 55%, var(--sheet));
}

.journal-compare-book[b-5odqgdohs5] {
    display: flex;
    width: 108px;
    height: 124px;
    /* surface: .qs-cover-board (book.css) */
    border-radius: 2px calc(8px * var(--cover-round, 1)) calc(8px * var(--cover-round, 1)) 2px;
    overflow: hidden;
    color: var(--cover-type, var(--eco-yellow-type));
    border: 1px solid color-mix(in srgb, var(--cover-border, var(--eco-yellow-border)) 80%, var(--cover-shade, #3a2a10));
    box-shadow: 5px 8px 16px rgba(43, 42, 36, .16);
}

.journal-compare-spine[b-5odqgdohs5] {
    width: 11px;
    background: var(--cover-tape, color-mix(in srgb, var(--cover-lo, #000) 72%, #1a1408));
}

.journal-compare-face[b-5odqgdohs5] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-compare-mark[b-5odqgdohs5] {
    width: 36px;
    height: 36px;
    color: var(--cover-type, var(--ink));
    opacity: 0.9;
}

.journal-compare-block[b-5odqgdohs5] {
    width: 8px;
    background: repeating-linear-gradient(
        to right,
        #f6f1e6 0 1px,
        #e3dccb 1px 2px
    );
}

.journal-compare-pad[b-5odqgdohs5] {
    position: relative;
    width: 108px;
    height: 124px;
}

.journal-compare-board[b-5odqgdohs5] {
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 12px;
    border-radius: 2px 5px 5px 2px;
    background: var(--pad-cover, var(--pad-cover-default));
    border: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    box-shadow: 4px 6px 12px rgba(43, 42, 36, .12);
}

.journal-compare-leaf[b-5odqgdohs5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    height: 112px;
    border: 1px solid var(--sheet-edge);
    border-radius: 1px;
    box-shadow: 3px 6px 12px rgba(43, 42, 36, .16);
    transform: rotate(-1.5deg);
}

.journal-compare-stub[b-5odqgdohs5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: #1c1c1c;
}

.journal-compare-perf[b-5odqgdohs5] {
    position: absolute;
    top: 18px;
    left: 4px;
    right: 4px;
    border-top: 1px dashed rgba(43, 42, 36, .55);
}

.journal-compare-name[b-5odqgdohs5] {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink-soft);
}

.journal-compare-line[b-5odqgdohs5] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.journal-compare-why[b-5odqgdohs5] {
    margin: 0 0 16px;
    max-width: 40rem;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

@media (max-width: 560px) {
    .journal-compare[b-5odqgdohs5] {
        grid-template-columns: 1fr;
    }
}

.journal-pad-volume[b-5odqgdohs5] {
    margin: 14px 0 0;
}

/* The notebook's size: one button a stationer's sheet count, laid out like the pad's formats. */
.journal-pages-label[b-5odqgdohs5] {
    display: block;
    margin-top: 14px;
}
.journal-pages[b-5odqgdohs5] {
    flex-wrap: wrap;
}
/* A size the open book has already outgrown: still there for a new book, but faint, so the
   note under the row is not a surprise. */
.journal-pages .option.is-too-small:not(.option-on)[b-5odqgdohs5] {
    opacity: .6;
}
.journal-pages-note[b-5odqgdohs5] {
    margin: 6px 0 0;
    color: var(--text-secondary);
}
/* /Components/Journals/JournalShelfView.razor.rz.scp.css */
/* The journals lie on a leather desk blotter: smooth, satin-finished hide in the writer's chosen
   colour (Settings, The day), with a piped edge, tone-on-tone stitching a few millimetres in, and
   a padded rail down each side. Lit from a lamp at the upper left. Each book is set down at its own
   slight angle, the open one with its ribbon out. The pad is the one strong thing on this page;
   the books are the same covers as the threshold. */
.journal-pad[b-3jwl70wdo6] {
    --leather: #244235;
    --leather-edge: color-mix(in srgb, var(--leather) 60%, #000);
    --leather-thread: color-mix(in srgb, var(--leather) 62%, #E4D3B0);
    --rail: 64px;
    position: relative;
    --inset: 30px;
    margin-top: 8px;
    padding: 34px calc(var(--rail) + var(--inset)) 30px;
    border-radius: 7px;
    background:
        radial-gradient(ellipse 70% 80% at 22% 0%, rgba(255, 238, 210, .13), transparent 70%),
        linear-gradient(162deg, rgba(255, 255, 255, .05), transparent 45%, rgba(0, 0, 0, .16)),
        var(--leather);
    box-shadow:
        inset 0 0 0 1px var(--leather-edge),
        inset 0 2px 1px -1px rgba(255, 240, 215, .22),
        inset 0 -3px 3px -1px rgba(0, 0, 0, .30),
        0 2px 3px rgba(0, 0, 0, .28),
        0 14px 32px rgba(43, 42, 36, .22);
    isolation: isolate;
}

/* The padded rails: a rounded bar of the same hide laid over each end, catching the lamp on its
   crown and casting a soft shadow onto the writing surface. Stitched along the inner edge. */
.journal-pad-rail[b-3jwl70wdo6] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--rail);
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 240, 215, .10), transparent 30%, rgba(0, 0, 0, .14)),
        linear-gradient(90deg,
            color-mix(in srgb, var(--leather) 78%, #000) 0%,
            color-mix(in srgb, var(--leather) 86%, #fff) 24%,
            color-mix(in srgb, var(--leather) 93%, #fff) 42%,
            var(--leather) 66%,
            color-mix(in srgb, var(--leather) 80%, #000) 100%);
}

.journal-pad-rail.is-left[b-3jwl70wdo6] {
    left: 0;
    border-radius: 7px 0 0 7px;
    box-shadow: 1px 0 0 var(--leather-edge), 5px 0 7px -3px rgba(0, 0, 0, .45);
}

.journal-pad-rail.is-right[b-3jwl70wdo6] {
    right: 0;
    border-radius: 0 7px 7px 0;
    box-shadow: -1px 0 0 var(--leather-edge), -5px 0 7px -3px rgba(0, 0, 0, .40);
}

.journal-pad-rail[b-3jwl70wdo6]::after {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    border-left: 1.5px dashed var(--leather-thread);
    opacity: .75;
}

.journal-pad-rail.is-left[b-3jwl70wdo6]::after { right: 6px; }
.journal-pad-rail.is-right[b-3jwl70wdo6]::after { left: 6px; }

/* The hide itself: a fine, pressed grain, barely there, worked into the colour across body and rails. */
.journal-pad[b-3jwl70wdo6]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='.7' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.9' intercept='-.34'/%3E%3CfeFuncG type='linear' slope='.9' intercept='-.34'/%3E%3CfeFuncB type='linear' slope='.9' intercept='-.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: soft-light;
    opacity: .45;
    pointer-events: none;
    z-index: 2;
}

/* The edge stitching, all the way round, over the rails too. */
.journal-pad[b-3jwl70wdo6]::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 4px;
    border: 1.5px dashed var(--leather-thread);
    opacity: .75;
    pointer-events: none;
    z-index: 3;
}

/* The writing surface the books lie on, inside the rails. Each book is placed by its top-left
   corner as a fraction of the room it has to move in (--x, --y from DeskLayout), so wherever it
   was left it is still on the pad at any width. Tall enough for the unmoved rows of four. */
.journal-shelf[b-3jwl70wdo6] {
    position: relative;
    z-index: 5;
    height: max(380px, calc(var(--rows, 1) * 244px));
    /* A shallow perspective so a few degrees' tilt antialiases as a layer, not a sheared bitmap. */
    perspective: 1600px;
    perspective-origin: 50% 40%;
    /* The shelf is its own stack (the books' order, the pen's and the inkwell's pop-ups), above
       the leathers in the corner; but only what lies on it takes the pointer, so the leathers
       under its edge can still be pressed. */
    pointer-events: none;
}
.journal-shelf[b-3jwl70wdo6]  > * { pointer-events: auto; }

.journal-desk-item[b-3jwl70wdo6] {
    --item-w: 148px;
    --item-h: 210px;
    position: absolute;
    left: calc((100% - var(--item-w)) * var(--x, 0));
    top: calc((100% - var(--item-h)) * var(--y, 0));
    z-index: var(--z, 0);
    width: var(--item-w);
    transform: translate3d(var(--carry-x, 0px), var(--carry-y, 0px), 0);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
    transition: transform .15s ease;
}

/* Tilt lives on an inner layer: carry and placement stay on the item, rotation on the GPU. */
.journal-desk-tilt[b-3jwl70wdo6] {
    position: relative;
    transform: rotateZ(var(--tilt, 0deg)) translateZ(0.001px);
    transform-origin: 50% 55%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

/* Drop-shadow follows the rotated silhouette more cleanly than a box-shadow on the cover alone. */
.journal-desk-item:not(.is-open) .journal-desk-tilt[b-3jwl70wdo6] {
    filter: drop-shadow(4px 9px 14px rgba(0, 0, 0, .24)) drop-shadow(1px 2px 3px rgba(0, 0, 0, .18));
}

.journal-desk-item:not(.is-open) .journal-shelf-cover[b-3jwl70wdo6],
.journal-desk-item:not(.is-open) .journal-shelf-pad[b-3jwl70wdo6] {
    box-shadow: none;
}

/* The room: the bookcase on the wall, the desk pad below it. */
.journal-room[b-3jwl70wdo6] {
    position: relative;
}

/* The bookcase: a walnut case, its shelves drawn every 166px down the back panel — a spine
   stands 150px of headroom on a 16px plank. Spines wrap onto the next shelf when one is full.
   The bookend, the parcel and the drawer stand on the board from below (flex-end), so a last
   tier holding only them is only as tall as they are, with the foot's board drawn under it.
   No stacking context here, so a spine carried down off it passes over the desk pad. */
.journal-bookcase[b-3jwl70wdo6] {
    --shelf: 166px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* rows from the foot: with no spines up, the short things still stand on the one board */
    align-content: flex-end;
    gap: 0 1px;
    /* one full row even when empty, so the shelf is always there (padding and borders included) */
    min-height: calc(var(--shelf) + 21px);
    margin: 4px 0 18px;
    padding: 14px 22px 0;
    border: 1px solid #3E2614;
    border-bottom: 6px solid #5C3A1F;
    border-radius: 6px 6px 3px 3px;
    /* Stained oak, after a pair of real ones: upright boards at the back with the grain running
       up them in long waves, and shelves with a lit top, a grained front edge and a shadow
       beneath. The shelf tile is one row (--shelf); its board sits where the books stand. */
    background:
        radial-gradient(ellipse 60% 90% at 16% 0%, rgba(255, 228, 180, .14), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='166'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.3'/%3E%3C/linearGradient%3E %3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0046875 0.5' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0 0.06 2.4 0 0 0 -1.05'/%3E%3C/filter%3E %3C/defs%3E %3Crect y='0' width='640' height='16' fill='url(%23a)'/%3E %3Crect y='147' width='640' height='4' fill='%23A9774A'/%3E %3Crect y='151' width='640' height='10' fill='%2386592F'/%3E %3Crect y='147' width='640' height='14' filter='url(%23w)'/%3E %3Crect y='151' width='640' height='1' fill='%23F3D9B0' fill-opacity='.28'/%3E %3Crect y='161' width='640' height='5' fill='url(%23b)'/%3E %3C/svg%3E") 0 14px / 640px var(--shelf) repeat,
        /* the bottom shelf's board again, at the foot of the case: under a short last tier
           (the drawer, the parcel or the bookend alone) as under a full one, where it lies on
           the board drawn above */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='19'%3E %3Cdefs%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.3'/%3E%3C/linearGradient%3E %3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0046875 0.5' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0 0.06 2.4 0 0 0 -1.05'/%3E%3C/filter%3E %3C/defs%3E %3Crect y='0' width='640' height='4' fill='%23A9774A'/%3E %3Crect y='4' width='640' height='10' fill='%2386592F'/%3E %3Crect y='0' width='640' height='14' filter='url(%23w)'/%3E %3Crect y='4' width='640' height='1' fill='%23F3D9B0' fill-opacity='.28'/%3E %3Crect y='14' width='640' height='5' fill='url(%23b)'/%3E %3C/svg%3E") 0 100% / 640px 19px repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960'%3E %3Cdefs%3E %3CclipPath id='c0'%3E%3Crect x='0' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c120'%3E%3Crect x='120' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c240'%3E%3Crect x='240' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c360'%3E%3Crect x='360' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c480'%3E%3Crect x='480' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c600'%3E%3Crect x='600' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c720'%3E%3Crect x='720' y='0' width='120' height='960'/%3E%3C/clipPath%3E%3CclipPath id='c840'%3E%3Crect x='840' y='0' width='120' height='960'/%3E%3C/clipPath%3E %3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='turbulence' baseFrequency='0.1145833 0.003125' numOctaves='2' seed='11' stitchTiles='stitch' result='n'/%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0083333 0.0041667' numOctaves='2' seed='5' stitchTiles='stitch' result='d'/%3E %3CfeDisplacementMap in='n' in2='d' scale='18' xChannelSelector='R' yChannelSelector='G'/%3E %3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0 0.04 -7 0 0 0 1.15'/%3E %3C/filter%3E %3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.0104167' numOctaves='1' seed='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.08 0 0 0 0 0.03 2.2 0 0 0 -1.05'/%3E %3C/filter%3E %3Cfilter id='wob' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.014' numOctaves='3' seed='4' result='t'/%3E %3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E %3C/filter%3E %3C/defs%3E %3Crect width='960' height='960' filter='url(%23v)' opacity='.5'/%3E %3Crect width='960' height='960' filter='url(%23p)' opacity='.55'/%3E %3Cg clip-path='url(%23c0)' filter='url(%23wob)'%3E%3Cpath d='M58.5,662 C57.6,312 60.8,246 64.0,242 C67.2,246 70.4,312 71.3,662' fill='none' stroke='%232A160A' stroke-width='0.67' stroke-opacity='0.22'/%3E%3Cpath d='M54.1,660 C54.0,304 59.0,238 64.0,234 C69.0,238 74.0,304 74.0,660' fill='none' stroke='%232A160A' stroke-width='0.64' stroke-opacity='0.20'/%3E%3Cpath d='M50.8,659 C51.2,297 57.6,231 64.0,227 C70.4,231 76.8,297 76.3,659' fill='none' stroke='%232A160A' stroke-width='1.43' stroke-opacity='0.13'/%3E%3Cpath d='M50.7,653 C48.0,285 56.0,219 64.0,215 C72.0,219 80.0,285 82.6,653' fill='none' stroke='%232A160A' stroke-width='1.18' stroke-opacity='0.19'/%3E%3Cpath d='M45.1,651 C42.9,277 53.5,211 64.0,207 C74.5,211 85.1,277 87.2,651' fill='none' stroke='%232A160A' stroke-width='0.89' stroke-opacity='0.13'/%3E%3Cpath d='M41.9,648 C40.0,268 52.0,202 64.0,198 C76.0,202 88.0,268 89.9,648' fill='none' stroke='%232A160A' stroke-width='0.78' stroke-opacity='0.23'/%3E%3Cpath d='M36.0,644 C35.7,258 49.9,192 64.0,188 C78.1,192 92.3,258 92.5,644' fill='none' stroke='%232A160A' stroke-width='0.66' stroke-opacity='0.11'/%3E%3Cpath d='M32.2,637 C32.6,245 48.3,179 64.0,175 C79.7,179 95.4,245 95.0,637' fill='none' stroke='%232A160A' stroke-width='0.91' stroke-opacity='0.23'/%3E%3Cpath d='M30.6,634 C28.8,236 46.4,170 64.0,166 C81.6,170 99.2,236 100.9,634' fill='none' stroke='%232A160A' stroke-width='1.30' stroke-opacity='0.15'/%3E%3Cpath d='M27.0,629 C24.7,225 44.4,159 64.0,155 C83.6,159 103.3,225 105.5,629' fill='none' stroke='%232A160A' stroke-width='1.33' stroke-opacity='0.16'/%3E%3Cpath d='M19.1,627 C19.6,217 41.8,151 64.0,147 C86.2,151 108.4,217 107.9,627' fill='none' stroke='%232A160A' stroke-width='1.36' stroke-opacity='0.13'/%3E%3Cpath d='M16.7,625 C15.7,209 39.9,143 64.0,139 C88.1,143 112.3,209 113.3,625' fill='none' stroke='%232A160A' stroke-width='1.36' stroke-opacity='0.23'/%3E%3Cpath d='M12.0,622 C10.8,200 37.4,134 64.0,130 C90.6,134 117.2,200 118.3,622' fill='none' stroke='%232A160A' stroke-width='1.19' stroke-opacity='0.23'/%3E%3Cpath d='M9.7,614 C7.1,186 35.5,120 64.0,116 C92.5,120 120.9,186 123.6,614' fill='none' stroke='%232A160A' stroke-width='1.07' stroke-opacity='0.25'/%3E%3C/g%3E%3Cg clip-path='url(%23c240)' filter='url(%23wob)'%3E%3Cpath d='M287.1,643 C286.2,293 289.1,227 292.0,223 C294.9,227 297.8,293 298.6,643' fill='none' stroke='%232A160A' stroke-width='1.59' stroke-opacity='0.28'/%3E%3Cpath d='M283.9,639 C282.9,283 287.5,217 292.0,213 C296.5,217 301.1,283 302.1,639' fill='none' stroke='%232A160A' stroke-width='0.62' stroke-opacity='0.20'/%3E%3Cpath d='M277.2,637 C279.9,275 285.9,209 292.0,205 C298.1,209 304.1,275 301.5,637' fill='none' stroke='%232A160A' stroke-width='1.37' stroke-opacity='0.13'/%3E%3Cpath d='M278.9,633 C276.6,265 284.3,199 292.0,195 C299.7,199 307.4,265 309.6,633' fill='none' stroke='%232A160A' stroke-width='0.68' stroke-opacity='0.20'/%3E%3Cpath d='M274.5,625 C272.6,251 282.3,185 292.0,181 C301.7,185 311.4,251 313.3,625' fill='none' stroke='%232A160A' stroke-width='1.46' stroke-opacity='0.16'/%3E%3Cpath d='M271.2,621 C268.9,241 280.5,175 292.0,171 C303.5,175 315.1,241 317.4,621' fill='none' stroke='%232A160A' stroke-width='1.56' stroke-opacity='0.13'/%3E%3Cpath d='M264.3,618 C265.9,232 278.9,166 292.0,162 C305.1,166 318.1,232 316.5,618' fill='none' stroke='%232A160A' stroke-width='1.08' stroke-opacity='0.23'/%3E%3Cpath d='M262.1,617 C262.6,225 277.3,159 292.0,155 C306.7,159 321.4,225 320.9,617' fill='none' stroke='%232A160A' stroke-width='0.97' stroke-opacity='0.22'/%3E%3Cpath d='M257.6,611 C257.5,213 274.7,147 292.0,143 C309.3,147 326.5,213 326.6,611' fill='none' stroke='%232A160A' stroke-width='1.22' stroke-opacity='0.25'/%3E%3Cpath d='M256.4,603 C254.8,199 273.4,133 292.0,129 C310.6,133 329.2,199 330.9,603' fill='none' stroke='%232A160A' stroke-width='1.47' stroke-opacity='0.28'/%3E%3Cpath d='M248.8,598 C251.1,188 271.6,122 292.0,118 C312.4,122 332.9,188 330.5,598' fill='none' stroke='%232A160A' stroke-width='1.23' stroke-opacity='0.11'/%3E%3Cpath d='M246.3,596 C248.4,180 270.2,114 292.0,110 C313.8,114 335.6,180 333.6,596' fill='none' stroke='%232A160A' stroke-width='0.94' stroke-opacity='0.11'/%3E%3C/g%3E%3Cg clip-path='url(%23c360)' filter='url(%23wob)'%3E%3Cpath d='M422.0,950 C424.4,702 427.2,636 430.0,632 C432.8,636 435.6,702 433.2,950' fill='none' stroke='%232A160A' stroke-width='0.96' stroke-opacity='0.11'/%3E%3Cpath d='M417.4,950 C419.5,690 424.8,624 430.0,620 C435.2,624 440.5,690 438.4,950' fill='none' stroke='%232A160A' stroke-width='0.85' stroke-opacity='0.18'/%3E%3Cpath d='M418.1,950 C416.0,682 423.0,616 430.0,612 C437.0,616 444.0,682 446.1,950' fill='none' stroke='%232A160A' stroke-width='1.59' stroke-opacity='0.20'/%3E%3Cpath d='M409.7,950 C412.1,674 421.1,608 430.0,604 C438.9,608 447.9,674 445.5,950' fill='none' stroke='%232A160A' stroke-width='0.94' stroke-opacity='0.16'/%3E%3Cpath d='M404.5,950 C407.4,666 418.7,600 430.0,596 C441.3,600 452.6,666 449.8,950' fill='none' stroke='%232A160A' stroke-width='1.55' stroke-opacity='0.22'/%3E%3Cpath d='M401.5,950 C404.4,655 417.2,589 430.0,585 C442.8,589 455.6,655 452.8,950' fill='none' stroke='%232A160A' stroke-width='1.13' stroke-opacity='0.32'/%3E%3Cpath d='M398.1,950 C399.5,642 414.8,576 430.0,572 C445.2,576 460.5,642 459.0,950' fill='none' stroke='%232A160A' stroke-width='0.97' stroke-opacity='0.14'/%3E%3Cpath d='M396.6,950 C394.9,631 412.5,565 430.0,561 C447.5,565 465.1,631 466.7,950' fill='none' stroke='%232A160A' stroke-width='0.93' stroke-opacity='0.15'/%3E%3Cpath d='M392.3,950 C390.2,616 410.1,550 430.0,546 C449.9,550 469.8,616 471.9,950' fill='none' stroke='%232A160A' stroke-width='1.41' stroke-opacity='0.28'/%3E%3Cpath d='M385.8,950 C385.7,607 407.8,541 430.0,537 C452.2,541 474.3,607 474.4,950' fill='none' stroke='%232A160A' stroke-width='0.96' stroke-opacity='0.11'/%3E%3Cpath d='M381.6,950 C383.0,598 406.5,532 430.0,528 C453.5,532 477.0,598 475.5,950' fill='none' stroke='%232A160A' stroke-width='1.29' stroke-opacity='0.31'/%3E%3Cpath d='M382.2,950 C379.3,583 404.6,517 430.0,513 C455.4,517 480.7,583 483.7,950' fill='none' stroke='%232A160A' stroke-width='1.56' stroke-opacity='0.18'/%3E%3Cpath d='M374.3,950 C376.1,575 403.0,509 430.0,505 C457.0,509 483.9,575 482.1,950' fill='none' stroke='%232A160A' stroke-width='0.80' stroke-opacity='0.24'/%3E%3Cpath d='M371.0,950 C371.2,561 400.6,495 430.0,491 C459.4,495 488.8,561 488.7,950' fill='none' stroke='%232A160A' stroke-width='1.25' stroke-opacity='0.28'/%3E%3Cpath d='M370.8,950 C368.3,548 399.2,482 430.0,478 C460.8,482 491.7,548 494.1,950' fill='none' stroke='%232A160A' stroke-width='1.38' stroke-opacity='0.27'/%3E%3Cpath d='M366.2,950 C364.5,540 397.2,474 430.0,470 C462.8,474 495.5,540 497.2,950' fill='none' stroke='%232A160A' stroke-width='0.93' stroke-opacity='0.28'/%3E%3C/g%3E%3Cg clip-path='url(%23c600)' filter='url(%23wob)'%3E%3Cpath d='M649.3,638 C649.9,288 653.9,222 658.0,218 C662.1,222 666.1,288 665.5,638' fill='none' stroke='%232A160A' stroke-width='1.55' stroke-opacity='0.26'/%3E%3Cpath d='M644.7,636 C646.8,280 652.4,214 658.0,210 C663.6,214 669.2,280 667.1,636' fill='none' stroke='%232A160A' stroke-width='1.50' stroke-opacity='0.28'/%3E%3Cpath d='M646.7,628 C643.9,266 650.9,200 658.0,196 C665.1,200 672.1,266 675.0,628' fill='none' stroke='%232A160A' stroke-width='1.26' stroke-opacity='0.18'/%3E%3Cpath d='M636.9,626 C639.8,258 648.9,192 658.0,188 C667.1,192 676.2,258 673.3,626' fill='none' stroke='%232A160A' stroke-width='1.57' stroke-opacity='0.24'/%3E%3Cpath d='M635.5,618 C635.9,244 646.9,178 658.0,174 C669.1,178 680.1,244 679.7,618' fill='none' stroke='%232A160A' stroke-width='1.47' stroke-opacity='0.28'/%3E%3Cpath d='M631.5,615 C632.7,235 645.4,169 658.0,165 C670.6,169 683.3,235 682.1,615' fill='none' stroke='%232A160A' stroke-width='0.84' stroke-opacity='0.23'/%3E%3Cpath d='M627.2,610 C629.4,224 643.7,158 658.0,154 C672.3,158 686.6,224 684.4,610' fill='none' stroke='%232A160A' stroke-width='1.51' stroke-opacity='0.18'/%3E%3Cpath d='M628.1,605 C625.6,213 641.8,147 658.0,143 C674.2,147 690.4,213 692.8,605' fill='none' stroke='%232A160A' stroke-width='1.02' stroke-opacity='0.30'/%3E%3Cpath d='M621.9,599 C621.7,201 639.9,135 658.0,131 C676.1,135 694.3,201 694.4,599' fill='none' stroke='%232A160A' stroke-width='0.62' stroke-opacity='0.20'/%3E%3Cpath d='M620.5,598 C618.7,194 638.3,128 658.0,124 C677.7,128 697.3,194 699.1,598' fill='none' stroke='%232A160A' stroke-width='0.77' stroke-opacity='0.20'/%3E%3Cpath d='M613.1,593 C614.2,183 636.1,117 658.0,113 C679.9,117 701.8,183 700.8,593' fill='none' stroke='%232A160A' stroke-width='1.12' stroke-opacity='0.22'/%3E%3Cpath d='M609.9,591 C609.5,175 633.8,109 658.0,105 C682.2,109 706.5,175 706.8,591' fill='none' stroke='%232A160A' stroke-width='0.85' stroke-opacity='0.16'/%3E%3Cpath d='M605.3,586 C604.9,164 631.5,98 658.0,94 C684.5,98 711.1,164 711.4,586' fill='none' stroke='%232A160A' stroke-width='1.36' stroke-opacity='0.30'/%3E%3Cpath d='M601.2,580 C601.2,152 629.6,86 658.0,82 C686.4,86 714.8,152 714.9,580' fill='none' stroke='%232A160A' stroke-width='1.11' stroke-opacity='0.25'/%3E%3Cpath d='M597.3,575 C597.4,141 627.7,75 658.0,71 C688.3,75 718.6,141 718.5,575' fill='none' stroke='%232A160A' stroke-width='1.54' stroke-opacity='0.25'/%3E%3C/g%3E%3Cg clip-path='url(%23c720)' filter='url(%23wob)'%3E%3Cpath d='M776.7,950 C778.1,615 782.1,549 786.0,545 C789.9,549 793.9,615 792.4,950' fill='none' stroke='%232A160A' stroke-width='1.16' stroke-opacity='0.31'/%3E%3Cpath d='M771.1,950 C773.3,607 779.7,541 786.0,537 C792.3,541 798.7,607 796.4,950' fill='none' stroke='%232A160A' stroke-width='1.04' stroke-opacity='0.12'/%3E%3Cpath d='M771.1,950 C770.1,600 778.1,534 786.0,530 C793.9,534 801.9,600 802.9,950' fill='none' stroke='%232A160A' stroke-width='1.38' stroke-opacity='0.30'/%3E%3Cpath d='M768.1,950 C767.1,587 776.6,521 786.0,517 C795.4,521 804.9,587 805.9,950' fill='none' stroke='%232A160A' stroke-width='0.74' stroke-opacity='0.29'/%3E%3Cpath d='M764.7,950 C762.0,578 774.0,512 786.0,508 C798.0,512 810.0,578 812.7,950' fill='none' stroke='%232A160A' stroke-width='1.00' stroke-opacity='0.21'/%3E%3Cpath d='M754.8,945 C756.8,565 771.4,499 786.0,495 C800.6,499 815.2,565 813.1,945' fill='none' stroke='%232A160A' stroke-width='1.03' stroke-opacity='0.21'/%3E%3Cpath d='M752.2,942 C753.3,556 769.7,490 786.0,486 C802.3,490 818.7,556 817.6,942' fill='none' stroke='%232A160A' stroke-width='1.32' stroke-opacity='0.10'/%3E%3Cpath d='M746.4,938 C749.3,546 767.6,480 786.0,476 C804.4,480 822.7,546 819.8,938' fill='none' stroke='%232A160A' stroke-width='0.93' stroke-opacity='0.24'/%3E%3Cpath d='M748.3,936 C745.4,538 765.7,472 786.0,468 C806.3,472 826.6,538 829.5,936' fill='none' stroke='%232A160A' stroke-width='1.39' stroke-opacity='0.31'/%3E%3Cpath d='M739.7,933 C742.5,529 764.2,463 786.0,459 C807.8,463 829.5,529 826.7,933' fill='none' stroke='%232A160A' stroke-width='1.38' stroke-opacity='0.16'/%3E%3Cpath d='M742.0,929 C739.6,519 762.8,453 786.0,449 C809.2,453 832.4,519 834.9,929' fill='none' stroke='%232A160A' stroke-width='1.42' stroke-opacity='0.16'/%3E%3Cpath d='M737.0,920 C736.6,504 761.3,438 786.0,434 C810.7,438 835.4,504 835.9,920' fill='none' stroke='%232A160A' stroke-width='1.30' stroke-opacity='0.12'/%3E%3C/g%3E%3Cg clip-path='url(%23c840)' filter='url(%23wob)'%3E%3Cpath d='M883.8,950 C884.3,957 887.1,891 890.0,887 C892.9,891 895.7,957 895.3,950' fill='none' stroke='%232A160A' stroke-width='0.67' stroke-opacity='0.31'/%3E%3Cpath d='M877.5,950 C880.0,944 885.0,878 890.0,874 C895.0,878 900.0,944 897.5,950' fill='none' stroke='%232A160A' stroke-width='1.46' stroke-opacity='0.11'/%3E%3Cpath d='M874.2,950 C875.2,933 882.6,867 890.0,863 C897.4,867 904.8,933 903.9,950' fill='none' stroke='%232A160A' stroke-width='1.15' stroke-opacity='0.30'/%3E%3Cpath d='M872.0,950 C871.9,925 880.9,859 890.0,855 C899.1,859 908.1,925 908.3,950' fill='none' stroke='%232A160A' stroke-width='0.84' stroke-opacity='0.12'/%3E%3Cpath d='M867.1,950 C868.8,918 879.4,852 890.0,848 C900.6,852 911.2,918 909.4,950' fill='none' stroke='%232A160A' stroke-width='0.91' stroke-opacity='0.17'/%3E%3Cpath d='M864.3,950 C864.3,909 877.1,843 890.0,839 C902.9,843 915.7,909 915.7,950' fill='none' stroke='%232A160A' stroke-width='0.78' stroke-opacity='0.18'/%3E%3Cpath d='M858.7,950 C861.6,900 875.8,834 890.0,830 C904.2,834 918.4,900 915.5,950' fill='none' stroke='%232A160A' stroke-width='1.33' stroke-opacity='0.22'/%3E%3Cpath d='M861.1,950 C858.5,889 874.3,823 890.0,819 C905.7,823 921.5,889 924.1,950' fill='none' stroke='%232A160A' stroke-width='0.71' stroke-opacity='0.28'/%3E%3Cpath d='M856.8,950 C854.8,878 872.4,812 890.0,808 C907.6,812 925.2,878 927.2,950' fill='none' stroke='%232A160A' stroke-width='0.99' stroke-opacity='0.21'/%3E%3Cpath d='M849.5,950 C850.4,863 870.2,797 890.0,793 C909.8,797 929.6,863 928.6,950' fill='none' stroke='%232A160A' stroke-width='1.43' stroke-opacity='0.26'/%3E%3C/g%3E %3C/svg%3E") 0 -48px / 960px 960px,
        /* the seams between the back's boards, each board a slightly different cut */
        repeating-linear-gradient(90deg,
            rgba(255, 226, 180, .07) 0 1px, rgba(255, 222, 170, .05) 1px 119px, rgba(30, 16, 6, .35) 119px 120px,
            rgba(255, 226, 180, .07) 120px 121px, transparent 121px 239px, rgba(30, 16, 6, .35) 239px 240px,
            rgba(255, 226, 180, .07) 240px 241px, rgba(40, 20, 6, .07) 241px 359px, rgba(30, 16, 6, .35) 359px 360px,
            rgba(255, 226, 180, .07) 360px 361px, rgba(255, 222, 170, .025) 361px 479px, rgba(30, 16, 6, .35) 479px 480px),
        linear-gradient(180deg, #5A3A20 0%, #6A4426 35%, #6E4628 100%);
    /* The uprights at either side, drawn inside so the case keeps its size. */
    box-shadow:
        inset 12px 0 0 #72492A,
        inset 13px 0 0 rgba(20, 10, 4, .4),
        inset -12px 0 0 #6A4326,
        inset -13px 0 0 rgba(20, 10, 4, .4),
        inset 0 8px 14px -6px rgba(0, 0, 0, .45),
        0 8px 20px rgba(43, 42, 36, .18);
}

/* Faintly cut into the back of the empty case, in the wood's own tone. */
.journal-bookcase-hint[b-3jwl70wdo6] {
    position: absolute;
    left: 0;
    right: 0;
    top: 62px;
    margin: 0;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: rgba(16, 9, 4, .78);
    text-shadow: 0 1px 0 rgba(255, 236, 205, .2);
    pointer-events: none;
}

.journal-bookcase.is-target[b-3jwl70wdo6] {
    box-shadow:
        inset 12px 0 0 #72492A,
        inset 13px 0 0 rgba(20, 10, 4, .4),
        inset -12px 0 0 #6A4326,
        inset -13px 0 0 rgba(20, 10, 4, .4),
        inset 0 8px 14px -6px rgba(0, 0, 0, .45),
        inset 0 0 0 2px rgba(243, 238, 227, .30),
        0 8px 20px rgba(43, 42, 36, .18);
}

/* Where a book let go here would stand. */
.journal-bookcase-mark[b-3jwl70wdo6] {
    position: absolute;
    width: 3px;
    height: 140px;
    border-radius: 2px;
    background: rgba(243, 238, 227, .85);
    box-shadow: 0 0 6px rgba(243, 238, 227, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
}

.journal-bookcase-mark.is-on[b-3jwl70wdo6] { opacity: 1; }

/* A book on the shelf, spine out: the cover's own cloth, a headband top and foot, its volume
   (and title) running down it. Each a little different in height, all on the same plank, and
   as thick as its sheets (--journal-sheets, from NotepadCatalog.BookCssVars): 32 sheets stand
   16px, the 80-sheet book its old 26px, 128 sheets 36px. */
.journal-spine[b-3jwl70wdo6] {
    --spine-h: 140px;
    position: relative;
    flex: 0 0 auto;
    width: clamp(16px, calc(16px + (var(--journal-sheets, 80) - 32) * 0.2084px), 36px);
    height: var(--spine-h);
    margin: calc(150px - var(--spine-h)) 0 16px;
    padding: 12px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--cover-border, rgba(0, 0, 0, .3));
    border-radius: 2px 2px 1px 1px;
    background:
        linear-gradient(180deg,
            transparent 7px, rgba(0, 0, 0, .22) 7px 8px, rgba(255, 255, 255, .14) 8px 9px,
            transparent 9px calc(100% - 9px),
            rgba(255, 255, 255, .14) calc(100% - 9px) calc(100% - 8px), rgba(0, 0, 0, .22) calc(100% - 8px) calc(100% - 7px),
            transparent calc(100% - 7px)),
        linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 35%, rgba(0, 0, 0, .22)),
        var(--cover-tape, var(--cover, #E8B400));
    color: var(--cover-tape-type, var(--cover-type, var(--text-primary)));
    box-shadow: 1px 0 2px rgba(0, 0, 0, .35);
    font-family: var(--serif);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: transform .12s ease;
}

/* A pack of index cards on the pad: landscape, banded, a loose card beside it (qs-desk.js
   CARDS matches this size). */
.journal-desk-item.is-cards[b-3jwl70wdo6] {
    --item-w: 243px;
    --item-h: 140px;
}
.journal-shelf-cards[b-3jwl70wdo6] {
    display: flex;
    padding: 0;
    border: none;
    background: none;
}
/* On the bookcase a pack stands on its long edge: a short, deep block of card, banded. */
.journal-spine.is-cards[b-3jwl70wdo6] {
    width: 20px;
    padding: 0;
    border: 1px solid rgba(60, 48, 30, .25);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, var(--card-stock, #fffdf8) 0 1.4px, color-mix(in srgb, var(--card-stock, #fffdf8) 86%, #6b5a3a) 1.4px 1.8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.journal-spine-band[b-3jwl70wdo6] {
    position: absolute;
    left: -2px;
    right: -2px;
    top: 32%;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6f5136, #9a7350 40%, #86633f 70%, #5f442c);
    box-shadow: 0 1px 2px rgba(30, 20, 10, .35);
}

.journal-spine.is-pad[b-3jwl70wdo6] {
    width: 18px;
    border-color: color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 40%, rgba(0, 0, 0, .2)),
        var(--pad-cover, var(--pad-cover-default));
    color: #fff;
}

.journal-spine:hover[b-3jwl70wdo6] { transform: translateY(-4px); }

/* The bookend: an oak upright after the last book, its top corners chamfered and a dark slot
   routed down its face, standing on the same plank as the books. */
.journal-bookend[b-3jwl70wdo6] {
    flex: 0 0 auto;
    width: 20px;
    height: 104px;
    align-self: flex-end;
    margin: 18px 0 16px 3px;
    clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%, 0 3px);
    background:
        linear-gradient(90deg, rgba(255, 230, 190, .24) 0 2px, transparent 2px calc(100% - 2px), rgba(0, 0, 0, .22) calc(100% - 2px)),
        linear-gradient(90deg, transparent 0 9px, #1E0F06 9px 11px, transparent 11px) 0 12px / 100% calc(100% - 26px) no-repeat,
        repeating-linear-gradient(90deg, rgba(40, 20, 6, .16) 0 1px, transparent 1px 3px, rgba(255, 226, 180, .05) 3px 4px, transparent 4px 6px),
        linear-gradient(180deg, #93613A 0%, #7C5030 55%, #6A4327 100%);
    filter: drop-shadow(1px 0 1.5px rgba(0, 0, 0, .4));
}

.journal-spine:focus-visible[b-3jwl70wdo6] {
    outline: 2px solid rgba(243, 238, 227, .9);
    outline-offset: 2px;
}

.journal-spine-text[b-3jwl70wdo6] {
    writing-mode: vertical-rl;
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(var(--spine-h) - 44px);
}

.journal-spine.is-pad .journal-spine-text[b-3jwl70wdo6] {
    font-family: var(--ui);
    font-size: 9.5px;
    font-weight: 600;
    max-height: calc(var(--spine-h) - 22px);
}

.journal-spine-mark[b-3jwl70wdo6] {
    width: 14px;
    height: 14px;
    opacity: .9;
}

/* The open journal's ribbon, hanging out over the top of its spine; the title starts below it. */
.journal-spine.is-open[b-3jwl70wdo6] { padding-top: 26px; }

.journal-spine.is-open[b-3jwl70wdo6]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 8px;
    height: 24px;
    background: var(--wax);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3));
}

/* Taken off the shelf: carried above the desk pad and everything on it. */
.journal-spine.is-lifted[b-3jwl70wdo6] {
    z-index: 60;
    cursor: grabbing;
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) rotate(-4deg);
    transition: none;
    box-shadow: 6px 12px 18px rgba(0, 0, 0, .35);
}

/* Carried down over the pad: it opens out to a book, ready to lie there. */
.journal-spine.is-lifted.is-over-pad[b-3jwl70wdo6] {
    transform: translate(var(--carry-x, 0px), var(--carry-y, 0px)) rotate(-4deg) scale(1.15);
}

/* The open journal lies square and a touch proud of the rest. */
.journal-desk-item.is-open .journal-desk-tilt[b-3jwl70wdo6] {
    transform: scale(1.04) translateZ(0.001px);
    filter: none;
}

.journal-desk-item.is-open .journal-shelf-cover[b-3jwl70wdo6],
.journal-desk-item.is-open .journal-shelf-pad[b-3jwl70wdo6] {
    box-shadow: 6px 10px 22px rgba(0, 0, 0, .32), 1px 2px 3px rgba(0, 0, 0, .25);
}

/* Carried: lifted off the leather, its shadow longer and softer.
   Carry offset stays on the outer item (no transition); the tilt layer
   eases back to flush so a crooked book levels as it comes up. */
.journal-desk-item.is-lifted[b-3jwl70wdo6] {
    cursor: grabbing;
    transition: none;
}

.journal-desk-item.is-lifted .journal-desk-tilt[b-3jwl70wdo6] {
    transform: rotateZ(0deg) scale(1.05) translateZ(0.001px);
    transition: transform .22s cubic-bezier(.32, .72, .28, 1), filter .22s ease;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .35));
}

/* Let go where it lands: no glide back from the carry. */
.journal-desk-item.is-landing[b-3jwl70wdo6],
.journal-spine.is-landing[b-3jwl70wdo6] { transition: none; }

/* Carried up over the bookcase: drawn in, ready to stand on the shelf. */
.journal-desk-item.is-lifted.is-over-shelf[b-3jwl70wdo6] {
    opacity: .9;
}

.journal-desk-item.is-lifted.is-over-shelf .journal-desk-tilt[b-3jwl70wdo6] {
    transform: scale(.55) translateZ(0.001px);
    filter: none;
}

.journal-desk-item.is-lifted .journal-shelf-cover[b-3jwl70wdo6],
.journal-desk-item.is-lifted .journal-shelf-pad[b-3jwl70wdo6] { transform: none; }

.journal-shelf-book[b-3jwl70wdo6] {
    width: 148px;
    border: none;
    background: none;
    padding: 0;
    cursor: inherit;
    text-align: left;
    color: inherit;
    font-family: var(--ui);
}

.journal-shelf-cover[b-3jwl70wdo6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 210px;
    border-radius: 3px calc(10px * var(--cover-round, 1)) calc(10px * var(--cover-round, 1)) 3px;
    /* surface: .qs-cover-board (book.css) */
    color: var(--cover-type, var(--eco-yellow-type));
    border: 1px solid var(--cover-border, var(--eco-yellow-border));
    box-shadow: 6px 10px 22px rgba(0, 0, 0, .32), 1px 2px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.journal-shelf-book:hover .journal-shelf-cover[b-3jwl70wdo6],
.journal-shelf-book:focus-visible .journal-shelf-cover[b-3jwl70wdo6] {
    transform: translateY(-3px);
}

.journal-shelf-mark[b-3jwl70wdo6] {
    width: 42px;
    height: 42px;
}

/* The ribbon: hangs over the top board of the open journal, top right. On the others it
   only shows on hover, as an offer. */
.journal-shelf-slot[b-3jwl70wdo6] {
    width: 148px;
}

.journal-shelf-bookmark[b-3jwl70wdo6] {
    position: absolute;
    top: -5px;
    right: 18px;
    width: 15px;
    height: 29px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--wax);
    opacity: 0;
    filter: drop-shadow(1px 2px 2px rgba(43, 42, 36, .28));
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}

.journal-shelf-bookmark svg[b-3jwl70wdo6] {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.journal-desk-item.is-open .journal-shelf-bookmark[b-3jwl70wdo6] {
    opacity: 1;
    cursor: default;
}

.journal-desk-item:not(.is-open):hover .journal-shelf-bookmark[b-3jwl70wdo6],
.journal-desk-item:not(.is-open) .journal-shelf-bookmark:focus-visible[b-3jwl70wdo6] {
    opacity: .45;
    color: var(--ink);
}

.journal-desk-item:not(.is-open) .journal-shelf-bookmark:hover[b-3jwl70wdo6],
.journal-desk-item:not(.is-open) .journal-shelf-bookmark:focus-visible[b-3jwl70wdo6] {
    opacity: 1;
    color: var(--wax);
}

/* At the top right of each, as on a journal: on a pad, its sheet's corner; on a pack, the
   cards in it (not the loose one beside it). */
.journal-desk-item.is-pad .journal-shelf-bookmark[b-3jwl70wdo6] {
    top: -2px;
    left: 108px;
    right: auto;
}

.journal-desk-item.is-cards .journal-shelf-bookmark[b-3jwl70wdo6] {
    top: -6px;
    left: 138px;
    right: auto;
    height: 20px;
    z-index: 3;
}

.journal-shelf-bookmark:disabled[b-3jwl70wdo6] {
    pointer-events: none;
}

.journal-shelf-book:hover ~ .journal-shelf-bookmark[b-3jwl70wdo6],
.journal-shelf-book:focus-visible ~ .journal-shelf-bookmark[b-3jwl70wdo6] {
    transform: translateY(-3px);
}

.journal-shelf-id[b-3jwl70wdo6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.journal-shelf-title[b-3jwl70wdo6] {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-bottom: 2px;
}

.journal-shelf-vol[b-3jwl70wdo6] {
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 0.08em;
}

.journal-shelf-date[b-3jwl70wdo6] {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-align: center;
    opacity: 0.9;
}

.journal-shelf-book:hover .journal-shelf-pad[b-3jwl70wdo6],
.journal-shelf-book:focus-visible .journal-shelf-pad[b-3jwl70wdo6] {
    transform: translateY(-3px);
}

.journal-shelf-pad[b-3jwl70wdo6] {
    position: relative;
    display: block;
    width: 148px;
    height: 210px;
}

.journal-shelf-pad-board[b-3jwl70wdo6] {
    position: absolute;
    top: 36px;
    right: 6px;
    bottom: 8px;
    left: 34px;
    border-radius: 2px 6px 6px 2px;
    background: var(--pad-cover, var(--pad-cover-default));
    border: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    box-shadow: 6px 10px 20px rgba(0, 0, 0, .32);
}

.journal-shelf-pad-leaf[b-3jwl70wdo6] {
    position: absolute;
    top: 10px;
    left: 8px;
    width: 118px;
    height: 176px;
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: 1px;
    box-shadow: 3px 6px 12px rgba(43, 42, 36, .16);
    transform: rotate(-2deg);
    color: var(--ink);
}

/* Staple band across the top of the leaf: the pad's own orange, Quiet Stanza in white. */
.journal-shelf-pad-stub[b-3jwl70wdo6] {
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 6px;
    background: var(--pad-cover, var(--pad-cover-default));
    border-bottom: 1px solid color-mix(in srgb, var(--pad-board, var(--pad-board-default)) 70%, #111);
    color: #fff;
}

.journal-shelf-pad-stub-mark[b-3jwl70wdo6] {
    width: 13px;
    height: 13px;
    opacity: 0.95;
}

.journal-shelf-pad-stub-word[b-3jwl70wdo6] {
    font-family: var(--serif);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1;
}

.journal-shelf-pad-id[b-3jwl70wdo6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 8px 10px;
    text-align: center;
}

.journal-shelf-pad-no[b-3jwl70wdo6] {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.journal-shelf-book:focus-visible[b-3jwl70wdo6] {
    outline: 2px solid rgba(243, 238, 227, .85);
    outline-offset: 6px;
    border-radius: 6px;
}

/* Each names itself. The bookcase: a small brass plate screwed to the middle of its top rail,
   the words engraved and filled dark, a screw at either end. Not a thing to press or to catch a
   book carried past it. */
.journal-bookcase-plate[b-3jwl70wdo6] {
    position: absolute;
    top: -3px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 3px 17px 2px;
    border: 1px solid #6B4C1C;
    border-radius: 2px;
    background:
        radial-gradient(circle at 7px 50%, #5A3F14 0 1.2px, #F6DE9C 1.6px 2.6px, #8C6626 3px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 7px) 50%, #5A3F14 0 1.2px, #F6DE9C 1.6px 2.6px, #8C6626 3px, transparent 3.4px),
        linear-gradient(100deg, transparent 30%, rgba(255, 248, 220, .35) 45%, transparent 60%),
        linear-gradient(180deg, #EBCB7E 0%, #C99D47 48%, #A87B2E 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 225, .6),
        inset 0 -1px 0 rgba(70, 45, 10, .35),
        0 1px 2px rgba(0, 0, 0, .55);
    color: #3B2709;
    font-family: var(--serif);
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
    pointer-events: none;
    user-select: none;
}

/* The writing pad: its name blind-stamped into the hide at its foot, on the left — no colour of
   its own, only the leather pressed in: shade on the upper lip of each letter where the lamp
   (upper left) can't reach, a catch of light on the lower. */
.journal-pad-stamp[b-3jwl70wdo6] {
    position: absolute;
    left: calc(var(--rail) + 14px);
    bottom: 11px;
    z-index: 4;
    color: color-mix(in srgb, var(--leather) 91%, #000);
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, .3),
        0 1px 0 rgba(255, 240, 215, .16);
    pointer-events: none;
    user-select: none;
}

.journal-pad-choice[b-3jwl70wdo6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 4px;
}

/* Off the pad, below it: the leathers at its bottom left, New journal at its bottom right. */
.journal-shelf-foot[b-3jwl70wdo6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

/* The inks, by the inkwell wherever it stands (72 × 66, as qs-desk.js knows it): below it, or
   above it in the lower part of the pad. */
.desk-pen-pop.desk-ink-pop[b-3jwl70wdo6] {
    --pop-w: min(480px, calc(100% - 16px));
    left: clamp(8px, calc((100% - 72px) * var(--x) - 200px), calc(100% - var(--pop-w) - 8px));
    top: calc((100% - 66px) * var(--y) + 72px);
}
.desk-pen-pop.desk-ink-pop.is-above[b-3jwl70wdo6] {
    top: auto;
    bottom: calc((100% - 66px) * (1 - var(--y)) + 72px);
}

/* The nib and ink, by the pen on the pad: below it, or above when the pen lies low. Sized to
   its contents (eight inks to a row), so it never scrolls. */
.desk-pen-pop[b-3jwl70wdo6] {
    position: absolute;
    --pop-w: min(440px, calc(100% - 16px));
    left: clamp(8px, calc((100% - 240px) * var(--x) - 20px), calc(100% - var(--pop-w) - 8px));
    top: calc((100% - 67px) * var(--y) + 67px);
    z-index: 950;
    box-sizing: border-box;
    /* a set width, within the desk, so its right edge is never past the desk's */
    width: var(--pop-w);
    padding: 12px 16px 12px;
    border-radius: 10px;
    background: var(--paper, #f3eee3);
    color: var(--ink, #2b2a24);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(43, 42, 36, .15);
}
/* the four nibs on one line where they fit, as the eight inks are */
.desk-pen-pop[b-3jwl70wdo6]  .nib-row { flex-wrap: wrap; }
.desk-pen-pop.is-above[b-3jwl70wdo6] {
    top: auto;
    bottom: calc((100% - 67px) * (1 - var(--y)) + 67px);
}
/* off the pop-up: a tap there puts the pen down */
.desk-pen-backdrop[b-3jwl70wdo6] {
    position: fixed;
    inset: 0;
    z-index: 940;
    cursor: default;
}
.desk-pen-pop-head[b-3jwl70wdo6] {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}
.desk-pen-pop-foot[b-3jwl70wdo6] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.journal-shelf-tray[b-3jwl70wdo6] {
    margin: 0 16px 0 auto;
}

/* The pad's leathers, set in its own top-right corner, inside the right-hand rail. */
.journal-pad-choice[b-3jwl70wdo6] {
    position: absolute;
    top: 14px;
    right: 80px;
    z-index: 4;   /* over the hide's grain and stitching, under the shelf and its pop-ups */
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .16);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

.journal-leathers[b-3jwl70wdo6] {
    display: flex;
    gap: 8px;
}

.journal-leather[b-3jwl70wdo6] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(43, 42, 36, .22);
    cursor: pointer;
    transition: transform .12s ease;
}

.journal-leather:hover[b-3jwl70wdo6] { transform: scale(1.12); }

/* The leather in use: ringed in brass, a dark gap between, as a fitting on the desk would be. */
.journal-leather.is-on[b-3jwl70wdo6] {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 0 0 1.5px rgba(0, 0, 0, .45), 0 0 0 3px #C9A35A;
}

.journal-leather:focus-visible[b-3jwl70wdo6] {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .journal-pad[b-3jwl70wdo6] { --rail: 24px; --inset: 12px; padding-top: 26px; padding-bottom: 22px; }
    .journal-bookcase[b-3jwl70wdo6] { padding: 14px 12px 0; }
    .journal-shelf[b-3jwl70wdo6] { height: max(440px, calc(var(--rows-narrow, 1) * 236px)); }
}

@media (prefers-reduced-motion: reduce) {
    .journal-shelf-cover[b-3jwl70wdo6], .journal-shelf-pad[b-3jwl70wdo6], .journal-desk-item[b-3jwl70wdo6], .journal-desk-tilt[b-3jwl70wdo6], .journal-leather[b-3jwl70wdo6], .journal-spine[b-3jwl70wdo6], .journal-bookcase-mark[b-3jwl70wdo6] { transition: none; }
}

/* List view (chrome): tap-friendly rows, no drag. */
.journal-shelf-list[b-3jwl70wdo6] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.journal-shelf-list-item[b-3jwl70wdo6] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.journal-shelf-list-open[b-3jwl70wdo6] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--sheet-edge);
    border-radius: 8px;
    background: var(--sheet);
    cursor: pointer;
    text-align: left;
    font-family: var(--ui);
    color: var(--text);
}

.journal-shelf-list-open:hover[b-3jwl70wdo6] {
    border-color: color-mix(in srgb, var(--ink) 25%, var(--sheet-edge));
}

.journal-shelf-list-cover[b-3jwl70wdo6] {
    width: 28px;
    height: 38px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.journal-shelf-list-open[b-3jwl70wdo6]  .journal-shelf-list-cards { flex-shrink: 0; }

.journal-shelf-list-pad[b-3jwl70wdo6] {
    width: 28px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--pad-cover, #e8e4dc);
}

.journal-shelf-list-text[b-3jwl70wdo6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.journal-shelf-list-title[b-3jwl70wdo6] {
    font-weight: 600;
    font-size: 14px;
}

.journal-shelf-list-vol[b-3jwl70wdo6] {
    font-size: 13px;
}

.journal-shelf-list-meta[b-3jwl70wdo6] {
    font-size: 12px;
    color: var(--text-secondary);
}

.journal-shelf-list-bookmark[b-3jwl70wdo6] {
    width: 44px;
    flex-shrink: 0;
    border: 1px solid var(--sheet-edge);
    border-radius: 8px;
    background: var(--sheet);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.journal-shelf-list-bookmark svg[b-3jwl70wdo6] {
    width: 12px;
    height: auto;
    fill: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}

.journal-shelf-list-bookmark.is-on svg[b-3jwl70wdo6] {
    fill: var(--wax);
}

/* On a phone, or a phone on its side, the pop-up is a card in the middle of the screen, its
   whole height in reach (it scrolls if it must), rather than hung off the pen. */
@media (max-width: 600px), (max-height: 500px) {
    .desk-pen-pop[b-3jwl70wdo6], .desk-pen-pop.is-above[b-3jwl70wdo6], .desk-pen-pop.desk-ink-pop[b-3jwl70wdo6], .desk-pen-pop.desk-ink-pop.is-above[b-3jwl70wdo6] {
        position: fixed;
        left: 50%;
        /* the middle of the screen above the dock, which lies over the page */
        top: calc((100dvh - var(--dock-height, 0px)) / 2);
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(480px, calc(100vw - 24px));
        max-height: calc(100dvh - var(--dock-height, 0px) - 24px);
        overflow-y: auto;
    }
}

/* The shelf is a layer of its own (z-index 5): with the pen's or the inkwell's pop-up open it
   comes up over the rest of the page, so the pop-up's foot is never under the pad's label. */
.journal-shelf:has(.desk-pen-pop)[b-3jwl70wdo6] { z-index: 960; }
/* /Components/Journals/JourneyToolbar.razor.rz.scp.css */
.journey-toolbar[b-0alzp6tr5y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 0;
    background: transparent;
}

.journey-toolbar-start[b-0alzp6tr5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.journey-toolbar-heading[b-0alzp6tr5y] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding-right: 30px;
}

.journey-toolbar-title[b-0alzp6tr5y] {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    font-weight: 600;
}

.journey-bin-btn[b-0alzp6tr5y] {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: .65;
    transition: opacity .14s ease, color .14s ease, background .14s ease;
}

.journey-bin-ico[b-0alzp6tr5y] {
    width: 14px;
    height: 14px;
    display: block;
}

.journey-bin-btn:hover:not(:disabled)[b-0alzp6tr5y] {
    opacity: 1;
    color: var(--danger, #9a3b32);
    background: color-mix(in srgb, var(--sheet-edge) 40%, transparent);
}

.journey-bin-btn:focus-visible[b-0alzp6tr5y] {
    outline: 2px solid var(--laurel);
    outline-offset: 2px;
    opacity: 1;
}

.journey-bin-btn:disabled[b-0alzp6tr5y] {
    opacity: .3;
    cursor: default;
}

/* Where the reader is: hidden (visually-hidden) and kept for screen readers. Were it shown,
   it would sit between the title and the turning buttons, or on its own line when narrow. */
.journey-toolbar-status[b-0alzp6tr5y] {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journey-toolbar-end[b-0alzp6tr5y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
}

.journey-toolbar-review[b-0alzp6tr5y],
.journey-toolbar-upload[b-0alzp6tr5y] {
    min-height: 44px;
}

.journey-mode-fav[b-0alzp6tr5y] { display: inline-flex; align-items: center; gap: 5px; }
.journey-mode-fav[b-0alzp6tr5y]  .ink-heart { --journal-ink: currentColor; font-size: 13px; }

@media (max-width: 720px) {
    .journey-toolbar-label[b-0alzp6tr5y] { display: none; }
    .journey-toolbar-status[b-0alzp6tr5y] { flex: 1 1 100%; order: 3; white-space: normal; }
}
/* /Components/Journals/LedgerEditor.razor.rz.scp.css */
.journey-confirm-sheet[b-yqky9ajwnh] {
    width: min(480px, 100%);
}

.journey-confirm-lead[b-yqky9ajwnh] {
    margin: 0 0 .35rem;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.8vw, 1.45rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--ink-soft);
}

.journey-confirm-sub[b-yqky9ajwnh] {
    margin: 0 0 12px;
    font-size: .9rem;
    color: var(--text-secondary);
}

.journey-confirm-facts[b-yqky9ajwnh] {
    margin: 0 0 14px;
    padding-left: 1.1em;
    font-size: .94rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.journey-confirm-facts li + li[b-yqky9ajwnh] {
    margin-top: 4px;
}

.journey-confirm-check[b-yqky9ajwnh] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: .9rem;
    cursor: pointer;
}

.journey-confirm-check input[b-yqky9ajwnh] {
    margin-top: 3px;
}

.journey-confirm-error[b-yqky9ajwnh] {
    margin: 8px 0 0;
    color: var(--wax);
}
/* /Components/Journals/OpenBookDesk.razor.rz.scp.css */
/* The desk with a book open on it: the leather mat and the oak tray. The desk page's own
   background and gutter, and the page-fills-the-window rule, are global (common.css), since
   Your journals draws the same page around its shelf, and so is the tray's own layout, which
   Your journals' list view draws under its shelf too (desk.css, with the oak itself). */

/* The writing pad is the page: leather inset from the desk edge, books and twins on top. */
.journey-writing-pad[b-9h9d075b77] {
    --leather-edge: color-mix(in srgb, var(--leather) 60%, #000);
    --leather-thread: color-mix(in srgb, var(--leather) 62%, #E4D3B0);
    --on-leather: color-mix(in srgb, var(--leather) 18%, #F3EADB);
    position: relative;
    isolation: isolate;
    margin-left: var(--journey-pad-gutter);
    margin-right: var(--journey-pad-gutter);
    min-height: 55vh;
    padding: 24px 16px 64px;
    border-radius: 0 0 10px 10px;
    color: var(--on-leather);
    background:
        radial-gradient(ellipse 80% 55% at 18% 0%, rgba(255, 238, 210, .14), transparent 72%),
        linear-gradient(165deg, rgba(255, 255, 255, .05), transparent 42%, rgba(0, 0, 0, .2)),
        var(--leather);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 215, .12),
        inset 0 -4px 12px rgba(0, 0, 0, .22),
        0 8px 28px rgba(43, 42, 36, .18);
}

.journey-writing-pad[b-9h9d075b77]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='.7' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.9' intercept='-.34'/%3E%3CfeFuncG type='linear' slope='.9' intercept='-.34'/%3E%3CfeFuncB type='linear' slope='.9' intercept='-.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: soft-light;
    opacity: .42;
}

.journey-writing-pad[b-9h9d075b77]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    border: 1.5px dashed var(--leather-thread);
    border-radius: 4px;
    opacity: .55;
}

/* With the mat down, the page is the window: the mat takes what the letter sheet leaves and
   stops a little above the bottom, on the desk, so the page has nothing to scroll. It grows
   past the window only when the book can't fit in it. (common.css makes room under a nudge.) */
.journey-writing-pad.is-open[b-9h9d075b77] {
    --journey-open-h: calc(100dvh - var(--dock-height, 0px) - var(--journey-nudge-h, 0px) - var(--journey-lip-h) - 11.5rem);
    flex: 1 1 auto;
    min-height: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

/* Your journals detail: the mat and stage use the window; only the lip and oak tray sit above them. */
.journey-shell:not(.today-desk) .journey-writing-pad.is-open[b-9h9d075b77] {
    --journey-open-h: calc(100dvh - var(--dock-height, 0px) - var(--journey-nudge-h, 0px) - var(--journey-lip-h) - 5.75rem - env(safe-area-inset-top, 0px));
}

/* Open book / pad / photo twin: stage fills the leather area (fit JS scales the paper inside). */
.journey-writing-pad.is-open .journey-twin-host[b-9h9d075b77] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* The writing desk's session wrapper sits between the host and the book; it takes the room. */
.journey-twin-host[b-9h9d075b77]  .ws {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The book's wrapper, drawn by whoever puts the book on the mat (the host's own markup, or
   the writing desk's session), so every rule on it reaches through ::deep. */
.journey-twin-host[b-9h9d075b77]  .journey-main {
    margin-top: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;   /* the idle twin is not dimmed on the mat (book.css .journal-quiet) */
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root {
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-stage {
    max-width: none;
    flex: 0 0 auto;
}

/* A journal, a pad or a pack of cards on the mat is moved by hand from anywhere on it
   (journal.js), so it needs no strip along its top. A journal and a pack turn at their sides,
   top to foot; a pad at its top and foot, edge to edge. The photos keep their own. */
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.cj-root) .journal-drag {
    display: none;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.cj-root, .is-closed) .journal-stage:not(.is-zoomed) {
    cursor: grab;
}

/* The hand is the page's here, at fit and in close (two fingers zoom the paper on a tablet,
   journal.js): the browser's own pan and pinch stay out of it. */
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.cj-root, .is-closed) .journal-stage {
    touch-action: none;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root.is-framing:not(.cj-root) .journal-stage {
    cursor: grabbing;
}

/* So is each side of a pack of cards: the right puts the card in hand to the back, the left
   brings the bottom card up. Cards have no dog-ears. */
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .cj-root) .corner {
    top: var(--paper-t, 0px);
    height: auto;
    width: clamp(44px, 10%, 96px);
    /* Visual hover wash only — clicks go through to the heart; the edge/dog-ear keep turns. */
    pointer-events: none;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .cj-root) .corner:not(.is-off):hover {
    background: linear-gradient(to var(--edge-to), rgba(90, 70, 30, .08), transparent);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .cj-root) .corner:not(.is-off)::before,
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .cj-root) .corner .dogear {
    pointer-events: auto;
}

/* A pad's sheet turns at its foot (lift it and over the top: the next) and comes back at its
   head (the one before). */
.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner {
    left: var(--paper-l, 0px);
    right: var(--paper-r, 0px);
    width: auto;
    height: clamp(40px, 12%, 90px);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-right {
    bottom: var(--paper-b, 0px);
    --edge-to: top;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-left {
    top: var(--paper-t, 0px);
    bottom: auto;
    --edge-to: bottom;
}

/* Over a zone, the sheet shows it will turn: at the foot it lifts towards the hand, a band of
   paper rising off the pad with its shadow under it; at the head the sheet before peeks back
   down over the binding. Without hover (a finger) a faint version stays, as an offer. */
.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner:not(.is-off)::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(to var(--edge-to), color-mix(in srgb, var(--sheet) 82%, #8c7b58), var(--sheet) 70%);
    opacity: 0;
    transition: opacity .2s ease, transform .25s ease;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-right:not(.is-off)::after {
    bottom: 0;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    box-shadow: 0 7px 9px -5px rgba(40, 30, 10, .4);
    transform-origin: 50% 0;
    transform: perspective(260px) rotateX(-4deg);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-left:not(.is-off)::after {
    top: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -7px 9px -5px rgba(40, 30, 10, .4);
    transform-origin: 50% 100%;
    transform: perspective(260px) rotateX(4deg) translateY(-30%);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-right:not(.is-off):hover::after {
    opacity: 1;
    transform: perspective(260px) rotateX(-22deg);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner-left:not(.is-off):hover::after {
    opacity: 1;
    transform: perspective(260px) rotateX(18deg) translateY(0);
}

@media (hover: none) {
    .journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner:not(.is-off)::after { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .journey-twin-host[b-9h9d075b77]  .journey-main .gift-pad-root .corner::after { transition: none; }
}

.journey-twin-host[b-9h9d075b77]  .journey-main :is(.card-pack-root, .gift-pad-root) .dogear { display: none; }

/* A card's sides stop short of its foot: the turn-over mark is in the bottom corner. */
.journey-twin-host[b-9h9d075b77]  .journey-main .card-pack-root .corner {
    bottom: calc(var(--paper-b, 0px) + 18%);
}

.journey-twin-host[b-9h9d075b77]  .journey-main .corner-left { --edge-to: right; }
.journey-twin-host[b-9h9d075b77]  .journey-main .corner-right { --edge-to: left; }

/* Viewport-based stage box — container queries were collapsing to 0 on the flex pad. */
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .card-pack-root) .journal-stage {
    --journey-stage-max-h: min(72dvh, calc(var(--journey-open-h) - 2rem));
    --journey-stage-max-w: min(560px, calc(100vw - 2 * var(--journey-pad-gutter) - 32px));
    width: min(var(--journey-stage-max-w), calc(var(--journey-stage-max-h) * 892 / 644));
    height: min(var(--journey-stage-max-h), calc(var(--journey-stage-max-w) * 644 / 892));
    min-width: min(240px, var(--journey-stage-max-w));
    min-height: min(320px, var(--journey-stage-max-h));
    aspect-ratio: 892 / 644;
}

.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root[data-fit="page"]:not(.gift-pad-root, .card-pack-root) .journal-stage,
.journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:is(.is-closed, .is-rear-cover):not(.gift-pad-root, .card-pack-root, .is-closing-cover, .is-opening-cover, [data-cover-wide]) .journal-stage {
    width: min(var(--journey-stage-max-w), calc(var(--journey-stage-max-h) * 446 / 644));
    height: min(var(--journey-stage-max-h), calc(var(--journey-stage-max-w) * 644 / 446));
    aspect-ratio: 446 / 644;
}

.journey-twin-host[b-9h9d075b77]  .journey-main :is(.gift-pad-root, .card-pack-root) .journal-stage {
    --journey-stage-max-h: min(78dvh, calc(var(--journey-open-h) - 1.25rem));
    --journey-stage-max-w: min(560px, calc(100vw - 2 * var(--journey-pad-gutter) - 32px));
    width: min(var(--journey-stage-max-w), calc(var(--journey-stage-max-h) * var(--pad-ratio, 0.707)));
    height: min(var(--journey-stage-max-h), calc(var(--journey-stage-max-w) / var(--pad-ratio, 0.707)));
    min-width: min(200px, var(--journey-stage-max-w));
    min-height: min(280px, var(--journey-stage-max-h));
    aspect-ratio: var(--pad-ratio, 0.707);
}

.journey-shell:not(.today-desk) .journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:not(.gift-pad-root, .card-pack-root) .journal-stage {
    --journey-stage-max-h: max(280px, calc(var(--journey-open-h) - 0.75rem));
    --journey-stage-max-w: min(960px, calc(100vw - 2 * var(--journey-pad-gutter) - 16px));
}

.journey-shell:not(.today-desk) .journey-twin-host[b-9h9d075b77]  .journey-main .journal-root[data-fit="page"]:not(.gift-pad-root, .card-pack-root) .journal-stage,
.journey-shell:not(.today-desk) .journey-twin-host[b-9h9d075b77]  .journey-main .journal-root:is(.is-closed, .is-rear-cover):not(.gift-pad-root, .card-pack-root, .is-closing-cover, .is-opening-cover, [data-cover-wide]) .journal-stage {
    --journey-stage-max-w: min(720px, calc(100vw - 2 * var(--journey-pad-gutter) - 16px));
}

.journey-shell:not(.today-desk) .journey-twin-host[b-9h9d075b77]  .journey-main :is(.gift-pad-root, .card-pack-root) .journal-stage {
    --journey-stage-max-h: max(280px, calc(var(--journey-open-h) - 0.75rem));
    --journey-stage-max-w: min(720px, calc(100vw - 2 * var(--journey-pad-gutter) - 16px));
}

.journey-writing-pad.is-open[b-9h9d075b77]  .small {
    color: color-mix(in srgb, var(--on-leather) 82%, transparent);
}

.journey-twin-host[b-9h9d075b77] {
    position: relative;
    z-index: 1;
}

/* On Your journals the mat's head runs on under the bookcase's lip, so it is square there; the
   writing desk has no lip, and the mat is a whole hide with its corners rounded all round. */
.journey-shell.today-desk .journey-writing-pad[b-9h9d075b77] {
    border-radius: 10px;
}

/* ── the writing desk: the book fills the mat ──
   On the writing desk the book is the thing being watched, so its stage takes the mat's whole
   width and height (less the tray and the window's chrome) rather than Your journals' 560px.
   The same vars size the one-page and the pad stages. */
.journey-shell.today-desk:not(.is-writing) .journey-twin-host[b-9h9d075b77]  .journey-main .journal-root .journal-stage {
    /* the mat's own height (it is a size container on the desk, desk.css): whatever the tray
       and the window leave it, rather than a guess at them */
    --journey-stage-max-h: 100cqh;
    --journey-stage-max-w: calc(100vw - var(--rail-width, 0px) - 2 * var(--journey-pad-gutter) - 40px);
}

/* ── the book comes to the mat ──
   Before the start the book waits small in the mat's corner (Corner: the filing cover), and
   the real book lies on the mat already, shut and fitted, but not to be seen; at the start the
   script (qsJournal.bookFromCorner) shows it over the corner's picture at that size and lets
   it glide and grow to where it lies, so the small book becomes the big one. Hidden by its
   opacity alone and never moved, so its place can be measured for that. */
.journey-shell:not(.is-writing) .journey-twin-host[b-9h9d075b77]  .journey-main {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.journey-shell.is-shelved .journey-twin-host[b-9h9d075b77]  .journey-main {
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .journey-shell:not(.is-writing) .journey-twin-host[b-9h9d075b77]  .journey-main { transition: opacity .3s ease; }
}

/* ── the pen is down: the desk is the screen ──
   The session takes the whole window — the piece on a slip of paper and the page, both on
   the leather mat, the bar on the tray — over the rail and the dock (30), under the finish
   sheet (40). */
.journey-shell.is-writing[b-9h9d075b77] {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--desk);
    background-image: var(--desk-grain);
    background-size: 220px 220px;
}

.journey-shell.is-writing .page-wrap.journey-page[b-9h9d075b77] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
}

.journey-shell.is-writing .journey-writing-pad.is-open[b-9h9d075b77] {
    min-height: 0;
    padding: 12px 14px 10px;
    border-radius: 10px;
}

.journey-shell.is-writing .journey-writing-pad.is-open .journey-twin-host[b-9h9d075b77] {
    min-height: 0;
}

/* The piece lies on a slip of the paper on the mat; the page below is its own paper. */
.journey-shell.is-writing .journey-twin-host[b-9h9d075b77]  .ws-running { background: transparent; }
.journey-shell.is-writing .journey-twin-host[b-9h9d075b77]  .ws-stage {
    margin: 0 0 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 6px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(20, 16, 8, .18), 0 6px 18px rgba(20, 16, 8, .22);
    color: var(--ink);
    /* The session is a column here, not the grid that reads --ws-cue-h: the slip keeps to the
       four lines qsFocus.revealCurrent measures it to, and the page below takes the rest. */
    flex: 0 0 var(--ws-cue-h);
    min-height: 0;
    box-sizing: border-box;
}
.journey-shell.is-writing .journey-twin-host[b-9h9d075b77]  .ws-running .ws-twin { padding-bottom: 0; }

.journey-shell.is-writing .journey-tray[b-9h9d075b77] {
    margin: 0;
    border-radius: 0;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}

.journey-tray[b-9h9d075b77]  .ws-bar { border-top-width: 1px; }

/* The mat's top-right corner (Corner): the cover of the book the sitting is filed into —
   before the start, waiting there for it, with the arrows that choose another; while the pen
   is down, laid over the slip's right-hand end. The slip keeps its lines clear of it, and the
   cover is never taller than the slip is at its shortest (132px under 1200px wide, 160px
   over), so it doesn't reach the page below. A phone has no width to spare beside the line in
   hand, and a phone on its side no height, so there it is left off. */
.journey-writing-pad[b-9h9d075b77] {
    --mat-corner-w: clamp(64px, 7vw, 88px);
}
@media (min-width: 1200px) {
    .journey-writing-pad[b-9h9d075b77] { --mat-corner-w: 104px; }
}
.journey-mat-corner[b-9h9d075b77] {
    position: absolute;
    top: 18px;
    right: max(22px, calc(env(safe-area-inset-right, 0px) + 10px));
    /* Over the letter's layer (.sitting-lay, 30), which covers the whole mat so the letter can
       be carried and scrolled anywhere on it: under it, the arrows beside the book took no
       click. Still under the sheets (40). */
    z-index: 31;
    width: var(--mat-corner-w);
}
@media (min-width: 600px) and (min-height: 521px) {
    .journey-shell.is-writing .journey-writing-pad:has(> .journey-mat-corner) .journey-twin-host[b-9h9d075b77]  .ws-stage {
        padding-right: calc(var(--mat-corner-w) + 18px);
    }
}
@media (max-width: 599px), (max-height: 520px) {
    .journey-mat-corner[b-9h9d075b77] { display: none; }
}
/* /Components/Journals/PhotoCompare.razor.rz.scp.css */
.journey-status[b-kzocak4ebp] {
    margin: 6px 0 0;
}

.journey-filters[b-kzocak4ebp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.journey-chip[b-kzocak4ebp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 9px;
    border: 1px solid var(--sheet-edge);
    border-radius: 999px;
    background: var(--sheet);
    font-family: var(--ui);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.journey-chip:hover[b-kzocak4ebp] {
    border-color: var(--text-secondary);
}

.journey-chip.is-on[b-kzocak4ebp] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.journey-chip-name[b-kzocak4ebp] {
    font-family: var(--serif);
    font-size: 13px;
}

.journey-chip-level[b-kzocak4ebp] {
    font-size: 10px;
    min-width: 1.1em;
    text-align: center;
    opacity: 0.75;
}

.journey-main[b-kzocak4ebp] {
    margin-top: 10px;
}

/* Floating digital-edit dialog — above compare fullscreen. The score dialog
   (PhotoScorePanel.razor.css) floats the same way. */
.journey-digital-edit[b-kzocak4ebp] {
    position: fixed;
    z-index: 80;
    top: 12vh;
    right: max(24px, calc(50% - 480px + 24px));
    width: min(360px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: var(--radius-sheet);
    box-shadow: 0 18px 48px rgba(43, 42, 36, .28);
    padding: 14px 18px 18px;
    overflow-y: auto;
}

.journey-digital-head[b-kzocak4ebp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
}

.journey-digital-head[b-kzocak4ebp] {
    margin-bottom: 6px;
}

/* The digital-edit dialog's close button wears the score dialog's class. */
.journey-score-close[b-kzocak4ebp] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    font-family: var(--ui);
}

.journey-score-close:hover[b-kzocak4ebp] {
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .journey-digital-edit[b-kzocak4ebp] {
        right: 16px;
        left: 16px;
        width: auto;
        top: auto;
        bottom: calc(var(--dock-height, 0px) + 12px);
        max-height: min(55dvh, 480px);
    }
}
/* /Components/Journals/PhotoScorePanel.razor.rz.scp.css */
.journey-notes[b-ed1df759mc] {
    width: 100%;
    min-height: 4.5em;
    resize: vertical;
}

.journey-hint[b-ed1df759mc] {
    margin: -4px 0 6px;
}

/* Floating score dialog — above compare fullscreen. The digital-edit dialog in
   PhotoCompare.razor.css floats the same way. */
.journey-score[b-ed1df759mc] {
    position: fixed;
    z-index: 80;
    top: 12vh;
    right: max(24px, calc(50% - 480px + 24px));
    width: min(360px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: var(--radius-sheet);
    box-shadow: 0 18px 48px rgba(43, 42, 36, .28);
    padding: 14px 18px 18px;
    overflow-y: auto;
}

.journey-score[b-ed1df759mc] {
    padding: 0;
}

.journey-score-handle[b-ed1df759mc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
}

.journey-score-handle[b-ed1df759mc] {
    padding: 12px 14px 10px;
    cursor: grab;
    user-select: none;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--sheet-edge);
    touch-action: none;
}

.journey-score.is-dragging .journey-score-handle[b-ed1df759mc] {
    cursor: grabbing;
}

.journey-score-close[b-ed1df759mc] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    font-family: var(--ui);
}

.journey-score-close:hover[b-ed1df759mc] {
    color: var(--text-primary);
}

.journey-score-body[b-ed1df759mc] {
    padding: 14px 18px 18px;
    overflow-y: auto;
}

@media (max-width: 720px) {
    .journey-score[b-ed1df759mc] {
        right: 16px;
        left: 16px;
        width: auto;
        top: auto;
        bottom: calc(var(--dock-height, 0px) + 12px);
        max-height: min(55dvh, 480px);
    }
}
/* /Components/LibrarianNote.razor.rz.scp.css */
/* The librarian's note under the card, in the librarian's hand: a heading, a few rows, and
   the sign-off to the right. The rows wrap in the browser and the ink host inks each row. */
.librarian-note[b-pie02iypug] {
    position: relative;
    margin: 12px 8px 4px;
}

.note-head[b-pie02iypug],
.note-text[b-pie02iypug],
.note-sign[b-pie02iypug] {
    margin: 0;
    font-family: var(--hand), cursive;
    font-weight: var(--ink-weight, 400);
    color: var(--journal-ink, var(--ink));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* The ink runs a touch wider than the webfont that lays the rows out: each row keeps a little
   room at the right, so a row's last letter is never past the canvas's edge. */
.note-head[b-pie02iypug], .note-text[b-pie02iypug] { padding-right: .9em; }
.note-head[b-pie02iypug] { font-size: 20px; line-height: 1.7; margin-bottom: .2em; }
.note-text[b-pie02iypug] { font-size: 17px; line-height: 1.75; margin-bottom: .35em; }
.note-sign[b-pie02iypug] { font-size: 17px; line-height: 1.75; margin-top: .3em; text-align: right; }

/* The ink is down: the webfont only holds the layout. */
.librarian-note.has-ink .note-head[b-pie02iypug],
.librarian-note.has-ink .note-text[b-pie02iypug],
.librarian-note.has-ink .note-sign[b-pie02iypug] { color: transparent; }

@media (max-width: 560px) {
    .librarian-note[b-pie02iypug] { margin: 10px 4px 2px; }
    .note-head[b-pie02iypug] { font-size: 18px; }
    .note-text[b-pie02iypug], .note-sign[b-pie02iypug] { font-size: 15.5px; }
}
/* /Components/NotebookSetup.razor.rz.scp.css */
.notebook-setup[b-56ij3cyk61] {
  width: 100%;
  max-width: 36rem;
  text-align: left;
}

.notebook-setup-preview[b-56ij3cyk61] {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* room under the board for the ribbon marker */
  margin: 0 0 calc(1.15rem + 14px);
}

.notebook-setup-cover[b-56ij3cyk61],
.notebook-setup-sheet[b-56ij3cyk61] {
  flex: 1;
  min-height: 7.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.notebook-setup-sheet[b-56ij3cyk61] {
  overflow: hidden;
  border: 1px solid var(--sheet-edge);
  color: var(--text-secondary);
}

/* surface: .qs-cover-board (book.css). No overflow clip, so the ribbon can hang below. */
.notebook-setup-cover[b-56ij3cyk61] {
  border-radius: calc(8px * var(--cover-round, 1));
  border: 1px solid color-mix(in srgb, var(--cover-border, var(--eco-yellow-border)) 80%, var(--cover-shade, var(--eco-yellow-type)));
  color: var(--cover-type, var(--eco-yellow-type));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.notebook-setup-cover .qs-cover-ribbon[b-56ij3cyk61] {
  height: 18px;
}

.notebook-setup-mark[b-56ij3cyk61] {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--cover-mark, var(--ink));
  opacity: 0.88;
}

.notebook-cover-family[b-56ij3cyk61] {
  margin: 0.35rem 0 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* A colour the chosen style suits wears a small dot under its name. */
.notebook-cover-swatch.is-suited .notebook-cover-swatch-name[b-56ij3cyk61]::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 2px auto 0;
  border-radius: 50%;
  background: var(--laurel);
}

.notebook-style-row[b-56ij3cyk61] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 8px;
  margin-bottom: 1rem;
}

.notebook-style-card[b-56ij3cyk61] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--sheet-edge);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notebook-style-card.is-on[b-56ij3cyk61] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.notebook-style-tile[b-56ij3cyk61] {
  width: 100%;
  height: 2.6rem;
  border-radius: 5px;
  border: 1px solid var(--cover-border, var(--eco-yellow-border));
}

.notebook-style-name[b-56ij3cyk61] {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.notebook-style-blurb[b-56ij3cyk61] {
  font-size: 0.72rem;
  line-height: 1.35;
}

.notebook-details[b-56ij3cyk61] {
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.notebook-setup-cover-title[b-56ij3cyk61] {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 88%;
  overflow-wrap: anywhere;
  opacity: 0.94;
}

.notebook-setup-cover-label[b-56ij3cyk61] {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}

.notebook-setup-sheet-label[b-56ij3cyk61] {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
}

.notebook-cover-swatch-face[b-56ij3cyk61] {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 7px;
  background: var(--swatch);
  border: 1.5px solid var(--swatch-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notebook-cover-swatch:hover .notebook-cover-swatch-face[b-56ij3cyk61] {
  transform: translateY(-1px);
}

.notebook-cover-swatch.is-on .notebook-cover-swatch-face[b-56ij3cyk61] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 0 1px var(--swatch-border);
}

.notebook-cover-swatch.is-on .notebook-cover-swatch-name[b-56ij3cyk61] {
  color: var(--ink);
  font-weight: 600;
}

.notebook-spacing-num[b-56ij3cyk61] {
  width: 4.2rem;
  padding: 6px 8px;
  border: 1px solid var(--sheet-edge);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

/* one height for every tab, so the sheet doesn't jump as you move between them */
.notebook-setup-panel[b-56ij3cyk61] {
  min-height: 17rem;
}
/* /Components/OnboardingPostage.razor.rz.scp.css */
/* The envelope's stamps and postmark: one SVG, set in the top-right corner by the envelope. */
.onboarding-postage[b-0bh9z6topd] {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.onboarding-postage .stamp-value[b-0bh9z6topd] {
  font-family: var(--ui);
  font-size: 6px;
  font-weight: 700;
  fill: #F4F1EA;
}

.onboarding-postage .stamp-country[b-0bh9z6topd] {
  font-family: var(--ui);
  font-size: 4.4px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-anchor: middle;
  fill: #F4F1EA;
}

/* Franked in black ink from a tired pad: grey, a little uneven, and multiplied into the
   stamps it lands on. */
.onboarding-postage .stamp-postmark[b-0bh9z6topd] {
  fill: none;
  stroke: #2A2A2A;
  stroke-width: 1.5;
  opacity: 0.62;
  mix-blend-mode: multiply;
}

.onboarding-postage .stamp-postmark-ring[b-0bh9z6topd],
.onboarding-postage .stamp-postmark-date[b-0bh9z6topd] {
  font-family: var(--ui);
  font-weight: 700;
  fill: #2A2A2A;
  stroke: none;
}

.onboarding-postage .stamp-postmark-ring[b-0bh9z6topd] {
  font-size: 7px;
  letter-spacing: 1.1px;
}

.onboarding-postage .stamp-postmark-date[b-0bh9z6topd] {
  font-size: 8.5px;
  letter-spacing: 0.6px;
}
/* /Components/OnboardingTour.razor.rz.scp.css */
/* ═══ first-open tour — cinematic prologue + desk spotlights ═══ */

.onboarding[b-59v7sap59r] {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  outline: none;
  transition: opacity 0.7s ease;
}

/* The card thins away and the closed cover — same lockup, already fullscreen — is the object. */
.onboarding.is-revealing[b-59v7sap59r] {
  opacity: 0;
  pointer-events: none;
}

/* —— prologue (full-bleed) —— */
.onboarding-prologue[b-59v7sap59r] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centred by the stage's auto margins, not justify-content: a letter taller than the
     screen then starts at the top, where centring would push its head out of reach. */
  justify-content: flex-start;
  /* less above and below on a short screen, so the letter has the height */
  padding: clamp(16px, 3vh, 64px) clamp(28px, 6vw, 64px);
  text-align: center;
  /* The desk the letter lies on, as on the public pages. */
  background: var(--desk-grain) 0 0 / 220px 220px, var(--desk);
  overflow: auto;
}

.onboarding-prologue[b-59v7sap59r]::before {
  content: "";
  position: absolute;
  inset: 12% 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-line), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.onboarding-stage[b-59v7sap59r] {
  position: relative;
  margin-block: auto;
  flex-shrink: 0;   /* a tall letter makes the prologue scroll, never squeezes the stage */
  width: min(36rem, 100%);
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The same shape as a personal invite email: kicker, a name, a rule, then one card. The
   sheet takes as much of the screen as it can while its lines stay a comfortable length:
   the writing grows with the screen (--letter-size), and the sheet with the writing. */
.onboarding-stage-letter[b-59v7sap59r] {
  width: min(40rem, 100%);
  align-items: stretch;
}
.onboarding-stage-letter.is-letter[b-59v7sap59r] {
  /* The writing grows with the screen's width, and no further than its height allows: the
     whole letter (about 51em tall at its full width, kicker and foot bar allowed for) lies on
     the screen without a scroll, down to a size still readable in this hand. */
  --letter-size: clamp(0.78rem, min(0.5rem + 1.3vw, (100dvh - 122px - 2 * clamp(16px, 3vh, 64px)) / 51), 1.7rem);
  width: min(42em, 100%);
  font-size: var(--letter-size);
}

.onboarding-invite[b-59v7sap59r] {
  text-align: center;
}

.onboarding-invite-kicker[b-59v7sap59r] {
  margin: 0;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wax);
}

.onboarding-invite-rule[b-59v7sap59r] {
  height: 2px;
  width: 4.1rem;
  margin: 0.75rem auto 1.05rem;
  background: var(--gold);
}

/* A sheet of the landing page's writing paper (tokens.css): its cream, laid lines, grain and
   Qs watermark, square-cornered and lying on the desk. Room at its foot, below the signature. */
.onboarding-letter[b-59v7sap59r] {
  position: relative;
  background-color: var(--letter-paper);
  background-image: var(--letter-light);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: var(--letter-shadow);
  padding: 2.3em 1.8em 2.6em;   /* a little air above "Dear …" */
  text-align: left;
}

.onboarding-letter[b-59v7sap59r]::before,
.onboarding-letter[b-59v7sap59r]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.onboarding-letter[b-59v7sap59r]::before {
  background-image: var(--letter-make);
  background-size: var(--letter-make-size);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* The Qs as a true watermark: thinner paper, lighter than the sheet. */
.onboarding-letter[b-59v7sap59r]::after {
  background-color: #fff;
  -webkit-mask: var(--letter-watermark) center top / 480px 360px repeat;
  mask: var(--letter-watermark) center top / 480px 360px repeat;
  opacity: 0.5;
  filter: blur(0.5px);
}

.onboarding-letter > *[b-59v7sap59r] {
  position: relative;
  z-index: 1;
}

/* The letter is written in procedural ink (cobalt, a fine nib), in Playwrite NZ, the bundled
   hand the writer is about to practise, named outright so a replay keeps it whatever hand
   Settings has chosen. Only the signature differs: Pinyon Script, whose small x-height wants
   a size about half again the body's. Each part is a .page with its own canvas; its .j-line
   rows are styled here in full, as page.css sizes .j-line for the journal. Until the ink is
   down the text shows in the ink's own colour. */
.onboarding-letter .page[b-59v7sap59r] {
  position: relative;
}

/* The ink is clipped to its part's box, and these tight lines would lose a descender or a
   swash off their edges: room above and below inside the box, taken back outside it. */
.onboarding-regards[b-59v7sap59r],
.onboarding-invite-sign[b-59v7sap59r] {
  padding-block: 0.4rem;
  margin-block: -0.4rem;
}

.onboarding-letter .j-line[b-59v7sap59r] {
  margin: 0;
  white-space: normal;
}

.onboarding-letter .page:not(.has-ink) .j-line[b-59v7sap59r] {
  color: var(--letter-ink, var(--ink));
}

/* Twice the space between paragraphs after the greeting. */
.onboarding-invite-to[b-59v7sap59r] {
  margin: 0 0 1.4em;
  font-family: var(--script);
  font-size: 1em;
  font-weight: var(--ink-weight, 400);
  color: var(--letter-ink, var(--ink));
  text-align: left;
}

.onboarding-invite-to .j-line[b-59v7sap59r] {
  font-family: var(--script);
  font-size: 1em;
  line-height: 1.55;
}

.onboarding-letter-body .j-line[b-59v7sap59r] {
  font-family: var(--script);
  font-size: 1em;
  line-height: 1.55;
  margin: 0 0 0.7em;
}

.onboarding-invite-cta:disabled[b-59v7sap59r] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* A breath after the last line ("…give it to a friend.") before the sign-off. */
.onboarding-signoff[b-59v7sap59r] {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 2em;
}

.onboarding-avatar[b-59v7sap59r] {
  width: 3.25em;
  height: 3.25em;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid var(--sheet-edge);
  flex: none;
}

.onboarding-regards .j-line[b-59v7sap59r] {
  font-family: var(--script);
  font-size: 0.95em;
  line-height: 1.3;
}

.onboarding-invite-cta[b-59v7sap59r] {
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 1rem;
}

.onboarding-invite-sign .j-line[b-59v7sap59r] {
  font-family: var(--letter);
  font-size: 1.5em;
  line-height: 1.4;
}

/* ── the envelope ──
   A cream envelope, front up: postage in the top-right corner, and the writer's name
   addressed by hand across the middle in procedural ink (Onyx Black, a broad nib,
   Playwrite NZ). It shares the letter's paper grain. Until the ink is down the name shows in the
   ink's own colour. */
.onboarding-envelope[b-59v7sap59r] {
  position: relative;
  aspect-ratio: 1.6;
  background: #F2EADB;
  border: 1px solid #DCCFB4;
  box-shadow:
    0 1px 2px rgba(60, 45, 20, 0.1),
    0 14px 30px -14px rgba(60, 45, 20, 0.35);
  text-align: left;
  overflow: hidden;
}

.onboarding-envelope.is-openable[b-59v7sap59r] {
  cursor: pointer;
}

.onboarding-envelope[b-59v7sap59r]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse 70% 50% at 18% 12%, rgba(160, 140, 100, 0.08), transparent 62%),
    radial-gradient(ellipse 55% 40% at 88% 78%, rgba(140, 120, 85, 0.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px;
}

.onboarding-envelope-postage[b-59v7sap59r] {
  position: absolute;
  top: 4%;
  right: 3%;
  width: 54%;
}

/* The name's top sits a third of the way down, clear of the postage. */
.onboarding-address-slot[b-59v7sap59r] {
  position: absolute;
  inset: 33.3% 5% 6%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.onboarding-address[b-59v7sap59r] {
  width: fit-content;
  max-width: 100%;
  padding-block: 0.4rem;   /* room for descenders inside the ink's box */
}

.onboarding-address .j-line[b-59v7sap59r] {
  margin: 0;
  white-space: normal;
  font-family: var(--script);
  font-size: clamp(1.6rem, 6.4vw, 2.7rem);
  line-height: 1.45;
}

.onboarding-address:not(.has-ink) .j-line[b-59v7sap59r] {
  color: var(--envelope-ink, var(--ink));
}

.onboarding-input.onboarding-address-to[b-59v7sap59r] {
  width: min(22rem, 100%);
  margin: 0;
  padding: 2px 4px;
  border: none;
  border-bottom: 1px dashed #BFAF8E;
  border-radius: 0;
  background: transparent;
  font-family: var(--script);
  font-size: clamp(1.4rem, 5.4vw, 2.2rem);
  font-weight: var(--ink-weight, 400);
  color: var(--envelope-ink, var(--ink));
  text-align: left;
}

.onboarding-input.onboarding-address-to:focus[b-59v7sap59r] {
  border-color: var(--wax);
  box-shadow: none;
}

.onboarding-ready-title[b-59v7sap59r] {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.15rem);
  line-height: 1.15;
  color: var(--ink);
}

.onboarding-ready[b-59v7sap59r] {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--sheet-edge);
  border-radius: 16px;
  padding: 1.15rem 1.35rem 1.15rem;
  text-align: left;
}

/* ── your pen ──
   A strip of the writer's paper with one line on it, in their hand, drawn by procedural ink
   in the nib and ink chosen below it. The size and pitch are the journal's for that nib,
   scaled for the card (--pen-sz, --pen-pitch). Until the ink is down the line shows in the
   ink's own colour. */
.onboarding-pen-sample[b-59v7sap59r] {
  position: relative;
  margin: 0 0 0.6rem;
  padding: calc(0.7rem + var(--ink-bleed)) calc(0.9rem + var(--ink-bleed));
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  overflow: visible;
}

.onboarding-pen-sample .j-line[b-59v7sap59r] {
  margin: 0;
  white-space: normal;
  font-family: var(--hand);
  font-size: var(--pen-sz, 1.4rem);
  line-height: var(--pen-pitch, 1.6);
}

.onboarding-pen-sample:not(.has-ink) .j-line[b-59v7sap59r] {
  color: var(--pen-ink, var(--ink));
}

.onboarding-ready-lead[b-59v7sap59r] {
  margin: 0 0 0.85rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.onboarding-checks[b-59v7sap59r] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.onboarding-check[b-59v7sap59r] {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem 0.1rem;
  border-top: 1px solid var(--rule-line);
  cursor: pointer;
}

.onboarding-check input[b-59v7sap59r] {
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.15rem 0 0;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.onboarding-check input:checked[b-59v7sap59r] {
  background: var(--ink);
}

.onboarding-check input:checked[b-59v7sap59r]::after {
  content: "";
  width: 0.28rem;
  height: 0.55rem;
  border: solid var(--sheet);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.onboarding-check input:focus-visible[b-59v7sap59r] {
  outline: 2px solid var(--wax);
  outline-offset: 3px;
}

/* The seven days: a tick and a short name each, in the same stroke as the checks above. */
.onboarding-days[b-59v7sap59r] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--rule-line);
}

.onboarding-day[b-59v7sap59r] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.onboarding-day:disabled[b-59v7sap59r] {
  cursor: default;
}

.onboarding-day:focus-visible[b-59v7sap59r] {
  outline: 2px solid var(--wax);
  outline-offset: 3px;
}

.onboarding-day-box[b-59v7sap59r] {
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  display: grid;
  place-content: center;
}

.onboarding-day.is-on .onboarding-day-box[b-59v7sap59r] {
  background: var(--ink);
}

.onboarding-day.is-on .onboarding-day-box[b-59v7sap59r]::after {
  content: "";
  width: 0.28rem;
  height: 0.55rem;
  border: solid var(--sheet);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.onboarding-day-label[b-59v7sap59r] {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.onboarding-day:not(.is-on) .onboarding-day-label[b-59v7sap59r] {
  color: var(--text-secondary);
  font-weight: 400;
}

.onboarding-days-note[b-59v7sap59r] {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.onboarding-check-label[b-59v7sap59r],
.onboarding-check-note[b-59v7sap59r] {
  display: block;
}

.onboarding-check-label[b-59v7sap59r] {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.onboarding-check-note[b-59v7sap59r] {
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.onboarding-skip[b-59v7sap59r] {
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onboarding-skip:hover[b-59v7sap59r] { color: var(--ink); }

/* —— the bar: one for every beat, below the page and always in view —— */
.onboarding-nav[b-59v7sap59r] {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(16px, 4vw, 40px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sheet-edge);
  background: color-mix(in srgb, var(--paper) 88%, var(--sheet));
}

.onboarding-nav-start[b-59v7sap59r] { justify-self: start; }
.onboarding-nav-end[b-59v7sap59r] {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.onboarding-back[b-59v7sap59r] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 10px 14px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.onboarding-back .fa[b-59v7sap59r] { font-size: 12px; }
.onboarding-back:hover:not(:disabled)[b-59v7sap59r] { color: var(--ink); border-color: var(--sheet-edge); }

/* Where you are: one dot a beat, the past ones filled, this one long. */
.onboarding-steps[b-59v7sap59r] {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onboarding-step[b-59v7sap59r] {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--sheet-edge);
  transition: width .2s ease, background .2s ease;
}
.onboarding-step.is-done[b-59v7sap59r] { background: var(--text-secondary); }
.onboarding-step.is-on[b-59v7sap59r] { width: 20px; background: var(--wax); }

@media (max-width: 560px) {
  .onboarding-prologue[b-59v7sap59r] { padding: 24px 16px; }
  /* On a phone the way on takes the row; Back and the steps share the line above it. */
  .onboarding-nav[b-59v7sap59r] {
    grid-template-columns: auto 1fr;
    row-gap: 8px;
  }
  .onboarding-steps[b-59v7sap59r] { justify-self: end; }
  .onboarding-nav-end[b-59v7sap59r] { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  .onboarding-nav-end .onboarding-invite-cta[b-59v7sap59r] { flex: 1; max-width: 18rem; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-step[b-59v7sap59r] { transition: none; }
}

.onboarding-input[b-59v7sap59r] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  text-align: left;
  outline: none;
}

.onboarding-input:focus[b-59v7sap59r] {
  border-color: var(--wax);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wax) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .onboarding[b-59v7sap59r] { transition: none; }
}
/* /Components/SentList.razor.rz.scp.css */
.sent-list[b-eyimqdnpch] { margin-top: 8px; }
.sent-who[b-eyimqdnpch] { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.sent-joined[b-eyimqdnpch] {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
/* /Components/SettingsTabs/SettingsInkTab.razor.rz.scp.css */
/* The demo: the swatch card beside a written line and the inks to try. */
.ink-demo[b-oypkw3wtn5] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 12px;
}

/* About the shape of the reference cards: a little over half as wide as tall. */
.ink-demo-card[b-oypkw3wtn5] {
    flex: 0 0 auto;
    width: 150px;
    height: 285px;
    display: block;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(49, 41, 31, .16);
    touch-action: pan-y;
}

.ink-demo-side[b-oypkw3wtn5] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ink-demo-line[b-oypkw3wtn5] {
    display: block;
    width: 100%;
    height: 84px;
    background: var(--paper, #FBF8EF);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(49, 41, 31, .08);
}

.ink-facts[b-oypkw3wtn5] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 8px 0 0;
}

.ink-facts dt[b-oypkw3wtn5] { font-weight: 600; }
.ink-facts dd[b-oypkw3wtn5] { margin: 0; }

/* Technical details: one line, closed, until the writer opens it. */
.ink-technical > summary[b-oypkw3wtn5] {
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}
.ink-technical[open] > summary[b-oypkw3wtn5] { margin-bottom: 8px; }
.ink-subtitle[b-oypkw3wtn5] { font-size: 1.05rem; margin: 16px 0 4px; }
.ink-minor[b-oypkw3wtn5] { font-size: .95rem; margin: 12px 0 2px; }
.ink-steps[b-oypkw3wtn5] { margin: 4px 0 8px; padding-left: 1.3em; }
.ink-steps li + li[b-oypkw3wtn5] { margin-top: 4px; }
.ink-elsewhere[b-oypkw3wtn5] { margin-top: 10px; }
.ink-elsewhere > summary[b-oypkw3wtn5] { cursor: pointer; }
.ink-tilt .option[b-oypkw3wtn5] { margin-top: 2px; }
.ink-note[b-oypkw3wtn5] { margin-top: 6px; }

@media (max-width: 560px) {
    .ink-demo[b-oypkw3wtn5] { flex-direction: column; align-items: center; }
    .ink-demo-side[b-oypkw3wtn5] { width: 100%; }
}
/* /Components/SettingsTabs/SettingsPageTab.razor.rz.scp.css */
/* The date, built from its parts: today's date as it will be written, in the page's hand, then
   one row of choices per part, the part's name beside its row (above it on a phone). */
.date-composer[b-6bpj5rzkco] { display: grid; gap: 8px; margin-bottom: 6px; }
.date-preview[b-6bpj5rzkco] {
    margin: 0 0 4px;
    font-family: var(--hand);
    font-size: 22px;
    line-height: 1.6;
    color: var(--journal-ink, var(--ink));
}
.date-preview sup[b-6bpj5rzkco], .date-part sup[b-6bpj5rzkco] {
    font-size: .58em; line-height: 0; vertical-align: baseline; position: relative; top: -.62em; margin-left: .03em;
}
.date-part[b-6bpj5rzkco] { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; align-items: center; }
.date-part-name[b-6bpj5rzkco] { font-size: 13.5px; color: var(--text-secondary); }
.date-part .option:disabled[b-6bpj5rzkco] { opacity: .4; cursor: default; }

@media (max-width: 520px) {
    .date-part[b-6bpj5rzkco] { grid-template-columns: 1fr; gap: 4px; }
}
/* /Components/ShareSheet.razor.rz.scp.css */
.share-optional[b-a6oiqyj1g7] { text-transform: none; letter-spacing: 0; font-weight: 400; }
.share-why[b-a6oiqyj1g7] { max-width: none; resize: vertical; }
.share-sheet .qs-field[b-a6oiqyj1g7] { max-width: none; }

.share-preview[b-a6oiqyj1g7] {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--sheet) 60%, var(--paper));
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
}
.share-preview p[b-a6oiqyj1g7] { margin: 0 0 6px; }
.share-preview p:last-child[b-a6oiqyj1g7] { margin-bottom: 0; }
.share-preview-label[b-a6oiqyj1g7] {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.share-preview-why[b-a6oiqyj1g7] { font-style: italic; }
.share-preview-title[b-a6oiqyj1g7] { font-weight: 600; }
.share-preview-rest[b-a6oiqyj1g7] { color: var(--text-secondary); font-size: 13.5px; }

.share-message[b-a6oiqyj1g7] { margin: 14px 0 0; font-size: 14px; color: var(--text-primary); }
.share-message.is-error[b-a6oiqyj1g7] { color: var(--wax); }
/* /Components/SittingCard.razor.rz.scp.css */
/* A sheet of the Qs letter paper laid on the mat over the open book, the card clipped to it.
   Nothing is frosted: the book shows round the sheet's edges. The tray below is not under it.
   Leaving, the sheet slides off the mat to the right. */
.sitting-lay[b-263m7xg8h1] {
    position: absolute;
    inset: 0;
    z-index: 30;   /* over the book and its corners, under the sheets (40) and the guide */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    /* At the foot, room for the sign-off to scroll clear of anything over the scroller's end:
       the tray where it lies over it (--letter-foot, measured by qsLetter) and a phone's
       gesture bar (the safe area). */
    padding: 18px 16px calc(18px + var(--letter-foot, 0px) + env(safe-area-inset-bottom, 0px));
    border-radius: inherit;
    color: var(--ink);
    animation: sitting-lay-in-b-263m7xg8h1 .4s ease both;
}
/* The handover: the sheet slides off the mat to the right, turning a little as a sheet pushed
   aside does, from wherever the writer has it (the carry and the size are in the same
   transform, qsLetter), and fades as it goes. The scroller clips it at the mat's edge, so it
   leaves the desk rather than running on across the window. The time is SittingCard.FadeMs. */
.sitting-lay.is-leaving[b-263m7xg8h1] { pointer-events: none; overflow: hidden; }
.sitting-lay.is-leaving .sitting-dialog[b-263m7xg8h1] {
    animation: sitting-sheet-away-b-263m7xg8h1 .55s cubic-bezier(.55, .06, .22, 1) forwards;
}
@keyframes sitting-sheet-away-b-263m7xg8h1 {
    from {
        opacity: 1;
        transform: translate(calc(var(--letter-shift, 0px) + var(--letter-x, 0px)), var(--letter-y, 0px)) rotate(-0.35deg) scale(var(--letter-scale, 1));
    }
    60% { opacity: 1; }
    to {
        opacity: 0;
        transform: translate(calc(var(--letter-shift, 0px) + var(--letter-x, 0px) + 100% + 60vw), calc(var(--letter-y, 0px) - 3%)) rotate(4deg) scale(var(--letter-scale, 1));
    }
}
@keyframes sitting-lay-in-b-263m7xg8h1 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The sheet: the letter paper with its laid lines and grain and the Qs watermark (as every page
   but the desk lies on, common.css), lying a touch off square on the leather with its shadow
   under it. Its auto margins centre it when it fits, and let it scroll from the top when it
   doesn't. */
.sitting-dialog[b-263m7xg8h1] {
    position: relative;
    isolation: isolate;
    --card-below: 10px;   /* the sheet's top edge to the card's top: what the clip holds */
    width: min(100%, 44rem);
    margin: auto 0;
    padding: var(--card-below) 22px 14px;
    border-radius: 2px;
    background-color: var(--letter-paper);
    background-image: var(--letter-light);
    box-shadow: var(--letter-shadow), 0 14px 36px rgba(20, 24, 18, .38);
    /* The writer's size for the letter (qsLetter), from its top edge, over its slight tilt;
       moved right as far as a letter wider than the scroller would hang off its left. */
    transform: translate(calc(var(--letter-shift, 0px) + var(--letter-x, 0px)), var(--letter-y, 0px)) rotate(-0.35deg) scale(var(--letter-scale, 1));
    cursor: grab;
    transform-origin: 50% 0;
    /* Two fingers size the letter rather than the page; one still scrolls it, and sideways
       too once it is wider than the scroller (qsLetter sets --letter-pan). */
    touch-action: var(--letter-pan, pan-y);
}
/* Carried about the desk (qsLetter): up a little, with a deeper shadow, no easing on its way. */
.sitting-dialog.is-carrying[b-263m7xg8h1] {
    cursor: grabbing;
    transition: none;
    box-shadow: var(--letter-shadow), 0 22px 48px rgba(20, 24, 18, .46);
}
.sitting-dialog :is(button, a, input, select, textarea, [role="slider"])[b-263m7xg8h1] { cursor: pointer; }
/* The corner fold (page.css .journal-scale) at the sheet's own top right, over the card. */
.sitting-scale[b-263m7xg8h1] { right: 0; z-index: 5; }
.sitting-dialog.is-scaling .sitting-scale[b-263m7xg8h1]::before { opacity: 0.78; }
.sitting-dialog[b-263m7xg8h1]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--letter-make);
    background-size: var(--letter-make-size);
    mix-blend-mode: multiply;
    opacity: .7;
    pointer-events: none;
}
/* The Qs as a true watermark: thinner paper, lighter than the sheet. */
.sitting-dialog[b-263m7xg8h1]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: #fff;
    -webkit-mask: var(--letter-watermark) center top / 480px 360px repeat;
    mask: var(--letter-watermark) center top / 480px 360px repeat;
    opacity: .5;
    filter: blur(0.5px);
    pointer-events: none;
}

/* The card is clipped to the sheet's top edge at its top-left corner and hangs a little off
   true from the clip: clockwise, right side down, as a card held at one corner would hang. The
   gem clip is slid over the sheet's edge, U-bend up: the edge sits in the bend, which shows on
   the leather above it. The inner tongue and the bend lie in front (::after, with a shadow),
   the tongue on the card; the outer loop is behind the sheet (::before), cut off at its edge.
   As on the landing page. */
.sitting-clipped[b-263m7xg8h1] {
    --clip-left: 26px;
    --clip-above: 12px;   /* the clip's top above the sheet's edge, which sits in the U-bend */
    position: relative;
    width: min(100%, 38rem);
    margin: 0 auto 0;
    transform: rotate(0.8deg);
    transform-origin: 38px 0;
}
.sitting-clipped[b-263m7xg8h1]  .cig-card { position: relative; z-index: 1; margin: 0; }
.sitting-clipped[b-263m7xg8h1]::before,
.sitting-clipped[b-263m7xg8h1]::after {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--card-below, 10px) + var(--clip-above)));
    left: var(--clip-left);
    width: 29px;
    height: 78px;
    background: center / contain no-repeat;
    pointer-events: none;
}
.sitting-clipped[b-263m7xg8h1]::before {
    z-index: 0;
    clip-path: inset(0 0 calc(100% - var(--clip-above) - 1px) 0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23858b93'/%3E%3Cstop offset='.45' stop-color='%23e3e6ea'/%3E%3Cstop offset='1' stop-color='%237d838b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 14V68a11 11 0 0 0 22 0V30' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sitting-clipped[b-263m7xg8h1]::after {
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23858b93'/%3E%3Cstop offset='.45' stop-color='%23e3e6ea'/%3E%3Cstop offset='1' stop-color='%237d838b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 22V62a6 6 0 0 0 12 0V14a9 9 0 0 0-18 0' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    filter: drop-shadow(1px 2px 1.2px rgba(40, 30, 20, 0.32));
}

/* The sheet is paper, not leather: its small print keeps the card's own ink (the mat fades
   small text on the hide, OpenBookDesk). A quote's provenance reads plainly, the source line
   darkest. */
.sitting-dialog[b-263m7xg8h1]  .cig-quote .small { color: var(--ink-soft); }
.sitting-dialog[b-263m7xg8h1]  .cig-quote .small:first-child { color: var(--text-primary); }
.sitting-dialog[b-263m7xg8h1]  .small { color: var(--text-secondary); }

/* The pick a little smaller than on the old steps card: the glass has a book's height. */
.sitting-clipped[b-263m7xg8h1]  .cig-title { font-size: clamp(22px, 3vw, 27px); margin-bottom: 8px; }
.sitting-clipped[b-263m7xg8h1]  .cig-title.is-long { font-size: clamp(18px, 2.2vw, 21px); }
.sitting-clipped[b-263m7xg8h1]  .cig-text { font-size: 15px; line-height: 1.45; }

/* Under the card: the sitting's name, small and typed, then the librarian's note by hand. */
.sitting-under[b-263m7xg8h1] {
    margin: 14px 6px 2px;
}
.sitting-under .eyebrow[b-263m7xg8h1] { margin: 0; }
.sitting-under .body-text[b-263m7xg8h1] { margin: 4px 0 0; }

@media (max-width: 560px) {
    .sitting-dialog[b-263m7xg8h1] { padding: var(--card-below) 14px 10px; }
    .sitting-clipped[b-263m7xg8h1] { --clip-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sitting-lay[b-263m7xg8h1] { animation: none; }
    .sitting-lay.is-leaving .sitting-dialog[b-263m7xg8h1] { animation: none; opacity: 0; transition: opacity .3s ease; }
}
/* /Components/SittingStart.razor.rz.scp.css */
/* The start on the oak: the mark on its ring, with a word beside it only when something is in
   the way. */
.sitting-go[b-avf3rq1rjx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px;
}

.sitting-start[b-avf3rq1rjx] {
    --disc: 60px;
    position: relative;
    width: var(--disc);
    height: var(--disc);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--laurel);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.sitting-start:hover:not(:disabled)[b-avf3rq1rjx] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.sitting-start:disabled[b-avf3rq1rjx] { opacity: .5; cursor: default; }
.sitting-start:focus-visible[b-avf3rq1rjx] { outline: 2px solid #F3EADB; outline-offset: 4px; }
/* While the reading plays the mark is quieter: a pause, not a start. */
.sitting-start.is-speaking[b-avf3rq1rjx] { background: #3B3A33; }

.sitting-start-glyph[b-avf3rq1rjx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding-left: 3px;   /* a play mark sits visually a touch right of centre */
}
.sitting-start.is-counting .sitting-start-glyph[b-avf3rq1rjx],
.sitting-start.is-speaking .sitting-start-glyph[b-avf3rq1rjx] { padding-left: 0; font-size: 18px; }

/* The ring is due but the reading is still being made: the track breathes, faintly, until
   the ring can fill with a voice ready behind it. */
.sitting-start.is-readying .sitting-ring-track[b-avf3rq1rjx] {
    animation: sitting-ring-readying-b-avf3rq1rjx 1.6s ease-in-out infinite;
}
@keyframes sitting-ring-readying-b-avf3rq1rjx {
    0%, 100% { stroke: rgba(243, 234, 219, .3); }
    50% { stroke: rgba(243, 234, 219, .75); }
}

/* Nothing is playing and the ring is still: the mark breathes, the thing to press. */
.sitting-start.is-inviting .sitting-start-glyph[b-avf3rq1rjx] {
    animation: sitting-play-pulse-b-avf3rq1rjx 1.8s ease-in-out infinite;
    transform-origin: center;
}
@keyframes sitting-play-pulse-b-avf3rq1rjx {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .7; }
}

/* The ring round the mark: fills over the writer's wait (--count-ms, from SittingStart), then the
   introduction starts by itself. The track stays as a faint rim at other times. */
.sitting-ring[b-avf3rq1rjx] {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.sitting-ring circle[b-avf3rq1rjx] { fill: none; stroke-width: 2.5; }
.sitting-ring-track[b-avf3rq1rjx] { stroke: rgba(243, 234, 219, .3); }
.sitting-ring-fill[b-avf3rq1rjx] {
    stroke: #CDE8B8;
    stroke-linecap: round;
    stroke-dasharray: 125.7;
    stroke-dashoffset: 125.7;
}
.sitting-start.is-counting .sitting-ring-fill[b-avf3rq1rjx] {
    animation: sitting-ring-fill-b-avf3rq1rjx var(--count-ms, 8s) linear forwards;
}
@keyframes sitting-ring-fill-b-avf3rq1rjx { to { stroke-dashoffset: 0; } }

.sitting-status[b-avf3rq1rjx] {
    max-width: 14em;
    color: rgba(243, 234, 219, .85);
}

@media (prefers-reduced-motion: reduce) {
    .sitting-start.is-inviting .sitting-start-glyph[b-avf3rq1rjx] { animation: none; }
    .sitting-start.is-readying .sitting-ring-track[b-avf3rq1rjx] { animation: none; }
    .sitting-start.is-counting .sitting-ring-fill[b-avf3rq1rjx] { animation-duration: 5s; animation-timing-function: steps(5, end); }
}
/* /Components/SittingTray.razor.rz.scp.css */
/* The sitting's tray: one row on the oak, the title at the start and everything else at the
   end, wrapping on a phone. */
.sitting-tray[b-9j9jw054sj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.sitting-tray-end[b-9j9jw054sj] {
    display: flex;
    /* Every control stays in sight: a row that won't fit wraps onto another line of the oak,
       rather than scrolling sideways with things off the edge. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 4px;
}
.sitting-tray-end > *[b-9j9jw054sj] { flex-shrink: 0; }
/* the choosing tools and the carry-on pair keep to one line too */
.sitting-tray-tools[b-9j9jw054sj], .sitting-tray .option-row[b-9j9jw054sj] { flex-wrap: nowrap; }
/* on a narrow desk the two choosing links keep their marks and drop their words */
@media (max-width: 1100px) {
    .sitting-tray[b-9j9jw054sj]  .cig-tool > span:last-child { display: none; }
    .sitting-tray[b-9j9jw054sj]  .cig-tool .fa { font-size: 16px; }
    /* a mark alone still wants a finger's room */
    .sitting-tray[b-9j9jw054sj]  .cig-tool { justify-content: center; align-items: center; min-width: 40px; min-height: 40px; }
}

/* The reader's own transport, on the oak: its buttons on paper, its progress bar across. */
.sitting-tray-transport[b-9j9jw054sj] { display: contents; }
.sitting-tray-transport[b-9j9jw054sj]  .reader { display: contents; }
.sitting-tray-transport[b-9j9jw054sj]  .reader-controls { gap: 8px; }
.sitting-tray-transport[b-9j9jw054sj]  .reader-preparing { max-width: 320px; }
.sitting-tray-transport[b-9j9jw054sj]  .reader-preparing .small { color: rgba(243, 234, 219, .85); }
.sitting-tray-transport[b-9j9jw054sj]  .reader-carry-on { color: #CDE8B8; }
/* The hands-free guide is for the writing drawer; on the tray it would be one more thing, and
   the commands' status line goes with it (the button says what it is doing). */
.sitting-tray-transport[b-9j9jw054sj]  .voice-guide { display: none; }
.sitting-tray-transport[b-9j9jw054sj]  .voice-status { display: none; }
.sitting-tray-transport[b-9j9jw054sj]  .voice, .sitting-tray-transport[b-9j9jw054sj]  .voice-row { display: contents; }

/* The transport is the start's mark (it pauses and carries on) and Stop: the reader's own
   play mark, the line and the stanza are left to the keys (and the help), and the spoken
   commands listen on their own (the writing screen has their switch). */
.sitting-tray-transport[b-9j9jw054sj]  .reader-transport,
.sitting-tray-transport[b-9j9jw054sj]  .reader-line,
.sitting-tray-transport[b-9j9jw054sj]  .reader-stanza,
.sitting-tray-transport[b-9j9jw054sj]  .voice { display: none; }

/* The choosing tools on the oak: the switch and the two links in cream. */
.sitting-tray-tools[b-9j9jw054sj] { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sitting-tray[b-9j9jw054sj]  .cig-tool { color: #F3EADB; }
.sitting-tray[b-9j9jw054sj]  .cig-tool:hover:not(:disabled) { color: #fff; }
.sitting-tray[b-9j9jw054sj]  .kind-switch { background: rgba(0, 0, 0, .18); border-color: rgba(243, 234, 219, .35); }
.sitting-tray[b-9j9jw054sj]  .kind-switch-opt { color: rgba(243, 234, 219, .85); }
.sitting-tray[b-9j9jw054sj]  .kind-switch-opt.kind-switch-on { background: var(--letter-paper, #F6F1E6); color: var(--ink, #2b2a24); }

/* A round mark for a tool with no word: How the lines look. */
.sitting-icon-btn[b-9j9jw054sj] { min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.sitting-icon-btn .fa[b-9j9jw054sj] { font-size: 15px; }
/* The ink in the pen, as a notification's pill sits on an icon: a drop of the colour at the
   mark's top right, as wide as the nib. A rim of the letter paper keeps a dark ink legible on
   the oak, whichever the theme. */
.sitting-setup-btn[b-9j9jw054sj] { position: relative; }
.sitting-ink-dot[b-9j9jw054sj] {
    position: absolute;
    top: calc(7px - var(--dot-size) / 2);
    right: calc(7px - var(--dot-size) / 2);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--dot-ink);
    box-shadow: 0 0 0 1.5px var(--letter-paper, #F6F1E6), 0 1px 2px 1.5px rgba(0, 0, 0, .35);
    pointer-events: none;
    transition: width .2s ease, height .2s ease, top .2s ease, right .2s ease, background-color .2s ease;
}

/* The reading's help: one round mark at the end of the row; the sheet opens above the tray. */
.sitting-help-btn[b-9j9jw054sj] {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
}
.sitting-tray[b-9j9jw054sj] { position: relative; }
.sitting-help[b-9j9jw054sj] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    z-index: 5;
    width: min(560px, calc(100vw - 48px));
    padding: 12px 14px 12px;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(43, 42, 36, .22);
    color: var(--ink);
    font-family: var(--ui);
}
.sitting-help-cols[b-9j9jw054sj] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; }
.sitting-help-list[b-9j9jw054sj] { margin: 0; font-size: 13.5px; }
.sitting-help-list div[b-9j9jw054sj] { display: flex; gap: 10px; padding: 3px 0; }
.sitting-help-list dt[b-9j9jw054sj] { min-width: 64px; flex-shrink: 0; }
.sitting-help-list dd[b-9j9jw054sj] { margin: 0; }
.sitting-help-list kbd[b-9j9jw054sj] {
    font-family: var(--ui); font-size: 12px; padding: 1px 6px;
    border: 1px solid var(--sheet-edge); border-radius: 4px; background: var(--paper);
}
.sitting-help-pause[b-9j9jw054sj] { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sheet-edge); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sitting-help-pause .small[b-9j9jw054sj] { color: var(--text-secondary); }
.sitting-help-foot[b-9j9jw054sj] { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 560px) { .sitting-help-cols[b-9j9jw054sj] { grid-template-columns: minmax(0, 1fr); } }
/* The help is a sheet of paper on the tray, not a control on the oak: its pause choices and
   Close keep the page's own look (the tray's dark glass and cream marks, desk.css and the
   carry-on pair above, reach everything inside .journey-tray, and cream on paper is unreadable). */
.sitting-tray .sitting-help .option-quiet[b-9j9jw054sj] {
    background: var(--sheet);
    border-color: var(--sheet-edge);
    color: var(--text-primary);
}
.sitting-tray .sitting-help .option-quiet:hover[b-9j9jw054sj] { border-color: var(--text-secondary); }
.sitting-tray .sitting-help .option-quiet.option-on[b-9j9jw054sj] {
    background: var(--chosen);
    border-color: var(--chosen);
    color: var(--paper);
}
.sitting-tray .sitting-help .btn.ghost-button[b-9j9jw054sj],
.sitting-tray .sitting-help .btn.ghost-button:hover:not(:disabled)[b-9j9jw054sj] {
    background: transparent;
    border-color: var(--sheet-edge);
    color: var(--text-primary);
    box-shadow: none;
}
.sitting-tray .sitting-help .btn.ghost-button:hover:not(:disabled)[b-9j9jw054sj] { border-color: var(--text-secondary); }

/* Stop beside the mark: a round, quiet word on the oak (the glass itself is the tray's, desk.css). */
.sitting-tray[b-9j9jw054sj]  .reader-stop {
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: var(--ui);
    font-size: 13px;
    letter-spacing: .02em;
}
/* The one thing to press next keeps its own shape: Start writing on the invite, round-edged. */
.sitting-tray[b-9j9jw054sj]  .sitting-start-writing { border-radius: 999px; padding-inline: 18px; }

/* The carry-on pair reads as quiet options on the wood. */
.sitting-tray .option-row[b-9j9jw054sj] { margin: 0; gap: 6px; }
.sitting-tray[b-9j9jw054sj]  .option-quiet {
    padding: 4px 12px;
    font-size: 13.5px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    border-color: rgba(243, 234, 219, .35);
    color: #F3EADB;
}
.sitting-tray[b-9j9jw054sj]  .option-quiet.option-on {
    background: var(--letter-paper, #F6F1E6);
    border-color: rgba(43, 42, 36, .35);
    color: var(--ink, #2b2a24);
}

/* The reading is heard: Start writing is lit on the wood, has the focus and breathes. */
.sitting-start-writing.is-ready[b-9j9jw054sj] {
    animation: start-writing-ready-b-9j9jw054sj 1.8s ease-in-out infinite;
}
.sitting-start-writing.is-ready:focus-visible[b-9j9jw054sj],
.sitting-start-writing.is-ready:focus[b-9j9jw054sj] {
    outline: 2px solid #F3EADB;
    outline-offset: 3px;
}
@keyframes start-writing-ready-b-9j9jw054sj {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--laurel) 0%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--laurel) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sitting-start-writing.is-ready[b-9j9jw054sj] { animation: none; } }

.sitting-tray-note[b-9j9jw054sj] {
    flex: 1 1 100%;
    margin: 0;
    color: rgba(243, 234, 219, .85);
}

@media (max-width: 720px) {
    .sitting-tray-end[b-9j9jw054sj] { justify-content: center; gap: 8px 10px; }
    /* the carry-on pair says less on a phone */
    .sitting-tray .lbl-full[b-9j9jw054sj] { display: none; }
    .sitting-tray .lbl-short[b-9j9jw054sj] { display: inline; }
}
/* the pair's short words are for a phone only (the toggle stands in for the pair on a phone on its side) */
@media (min-width: 721px) { .sitting-flow .lbl-short[b-9j9jw054sj] { display: none; } }
/* /Components/WritingBar.razor.rz.scp.css */
/* The writing bar on the desk's oak tray: the pen's moves as one strip of the tray's dark
   glass, a hairline between them, cream marks on it — the same glass as the tray's other
   controls (desk.css sets the glass on .journey-tray). The help's mark sits at the end. */
.ws-bar-wrap[b-e6ta3sbq28] { position: relative; padding-right: 52px; }
.ws-bar[b-e6ta3sbq28] {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--tray-rim, rgba(243, 234, 219, .22));
    background: var(--tray-glass, rgba(20, 12, 6, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .25);
}
.ws-bar-btn[b-e6ta3sbq28] {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 54px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px 4px;
    border: none;
    border-radius: 0;
    background: none;
    color: rgba(243, 234, 219, .78);
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.ws-bar-btn + .ws-bar-btn[b-e6ta3sbq28] { border-left: 1px solid rgba(243, 234, 219, .16); }
.ws-bar-btn:first-child[b-e6ta3sbq28] { border-radius: 999px 0 0 999px; padding-left: 10px; }
.ws-bar-btn:last-child[b-e6ta3sbq28] { border-radius: 0 999px 999px 0; padding-right: 10px; }
.ws-bar-btn:hover[b-e6ta3sbq28] { color: #F3EADB; background: var(--tray-glass-deep, rgba(20, 12, 6, .42)); }
.ws-bar-btn:disabled[b-e6ta3sbq28] { opacity: .38; cursor: default; background: none; }
.ws-bar-btn:focus-visible[b-e6ta3sbq28] { outline: 2px solid #F3EADB; outline-offset: -3px; }
.ws-bar-glyph[b-e6ta3sbq28] { font-size: 22px; line-height: 1; }
.ws-bar-glyph:not(.fa)[b-e6ta3sbq28] { font-family: var(--serif); }
.ws-bar-glyph.fa[b-e6ta3sbq28] { font-size: 16px; }
.ws-bar-mic.is-trouble[b-e6ta3sbq28] { color: #F2B36A; }
.ws-bar-done[b-e6ta3sbq28] { color: #F3EADB; }
.ws-bar-mic.is-on[b-e6ta3sbq28] { color: #F3EADB; }

/* The line is said and inked: the whole Next button lights green and breathes, with a ring
   rippling out from it, until it is pressed. Each layer waits out the line's ink first. */
.ws-bar-next[b-e6ta3sbq28] { position: relative; isolation: isolate; }
.ws-next-glow[b-e6ta3sbq28] {
    position: absolute; inset: 3px; z-index: -1; border-radius: 999px;
    background: var(--laurel); opacity: 0;
    animation: ws-next-glow-b-e6ta3sbq28 1.6s ease-in-out var(--next-wait, 0ms) infinite;
}
.ws-bar-next.is-inviting .ws-bar-glyph[b-e6ta3sbq28],
.ws-bar-next.is-inviting .ws-bar-label[b-e6ta3sbq28] {
    display: inline-block;
    animation: ws-next-ink-b-e6ta3sbq28 1.6s ease-in-out var(--next-wait, 0ms) infinite;
}
.ws-bar-next.is-inviting .ws-bar-glyph[b-e6ta3sbq28] { font-size: 1.25em; }
@keyframes ws-next-glow-b-e6ta3sbq28 {
    0%, 100% { opacity: .8; filter: brightness(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--laurel) 75%, transparent); }
    50% { opacity: 1; filter: brightness(1.35); box-shadow: 0 0 0 12px color-mix(in srgb, var(--laurel) 0%, transparent); }
}
@keyframes ws-next-ink-b-e6ta3sbq28 {
    0%, 100% { color: #fff; transform: scale(1); }
    50% { color: #fff; transform: scale(1.18); }
}
@media (max-height: 520px) {
    .ws-bar-btn[b-e6ta3sbq28] { min-height: 44px; gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-next-glow[b-e6ta3sbq28] { animation: none; opacity: .8; }
    .ws-bar-next.is-inviting .ws-bar-glyph[b-e6ta3sbq28], .ws-bar-next.is-inviting .ws-bar-label[b-e6ta3sbq28] { animation: none; color: #fff; }
}

/* Every line is written: Done turns green and breathes gently, the one thing left to press. */
.ws-bar-done.is-ready[b-e6ta3sbq28] { color: #9FD38A; }
.ws-bar-done.is-ready .ws-bar-glyph[b-e6ta3sbq28] { display: inline-block; animation: ws-done-breathe-b-e6ta3sbq28 2.2s ease-in-out infinite; }
@keyframes ws-done-breathe-b-e6ta3sbq28 {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .65; }
}
@media (prefers-reduced-motion: reduce) { .ws-bar-done.is-ready .ws-bar-glyph[b-e6ta3sbq28] { animation: none; } }

/* ── the help: the same round mark as the tray's, at the end of the strip; the sheet opens
   above the tray ── */
.ws-bar-help[b-e6ta3sbq28] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
}
.ws-keys[b-e6ta3sbq28] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    z-index: 5;
    width: min(560px, calc(100vw - 48px));
    padding: 12px 14px 12px;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(43, 42, 36, .22);
    color: var(--ink);
    font-family: var(--ui);
}
.ws-keys-cols[b-e6ta3sbq28] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; }
.ws-keys-voice[b-e6ta3sbq28] { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sheet-edge); font-size: 13.5px; }
.ws-keys-voice-line[b-e6ta3sbq28] { margin: 0 0 8px; }
.ws-keys-voice-line span[b-e6ta3sbq28] { color: var(--text-secondary); margin-left: 6px; }
.ws-keys-voice.is-trouble strong[b-e6ta3sbq28] { color: var(--wax); }
.ws-keys-foot[b-e6ta3sbq28] { display: flex; justify-content: flex-end; margin-top: 10px; }
/* The help is a sheet of paper on the tray: its buttons keep the page's own look, not the
   tray's glass and cream (desk.css reaches everything inside .journey-tray). */
.ws-keys .btn.ghost-button[b-e6ta3sbq28],
.ws-keys .btn.ghost-button:hover:not(:disabled)[b-e6ta3sbq28] {
    background: transparent;
    border-color: var(--sheet-edge);
    color: var(--text-primary);
    box-shadow: none;
}
.ws-keys .btn.ghost-button:hover:not(:disabled)[b-e6ta3sbq28] { border-color: var(--text-secondary); }
.ws-keys .btn.wax-button[b-e6ta3sbq28],
.ws-keys .btn.wax-button:hover:not(:disabled)[b-e6ta3sbq28] {
    background: var(--wax);
    border-color: transparent;
    color: var(--sheet);
    box-shadow: none;
}
.ws-keys .btn.wax-button:hover:not(:disabled)[b-e6ta3sbq28] { background: var(--wax-hover); }
@media (max-width: 560px) { .ws-keys-cols[b-e6ta3sbq28] { grid-template-columns: minmax(0, 1fr); } }
.ws-keys-list[b-e6ta3sbq28] { margin: 0; font-family: var(--ui); font-size: 13.5px; }
.ws-keys-list div[b-e6ta3sbq28] { display: flex; gap: 10px; padding: 3px 0; }
.ws-keys-list dt[b-e6ta3sbq28] { min-width: 64px; flex-shrink: 0; }
.ws-keys-list dd[b-e6ta3sbq28] { margin: 0; }
.ws-keys-list kbd[b-e6ta3sbq28] {
    font-family: var(--ui); font-size: 12px; padding: 1px 6px;
    border: 1px solid var(--sheet-edge); border-radius: 4px; background: var(--paper);
}
/* /Components/WritingFocus.razor.rz.scp.css */
/* The writing session. Idle: the twin on the desk, as it always was. Running: the desk makes
   the session the screen on every kind of device — one stacked layout that scales rather than
   three. Top: the piece, the line in hand large. Below: the place on the page, full width.
   The writing bar (WritingBar) lies on the desk's tray under it. The twin never leaves the tree. */

.ws[b-aq3nv8lzob] { position: relative; }

/* ── running: one grid, the session fills the desk ── */
.ws-running[b-aq3nv8lzob] {
    position: relative;
    margin: 0;
    height: 100%;
    min-height: 0;
    background: var(--paper);
    display: grid;
    /* the piece: a third until qsFocus.revealCurrent sizes it to four lines; the page takes the rest */
    --ws-cue-h: clamp(132px, 30dvh, 340px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, var(--ws-cue-h)) minmax(0, 1fr);
    grid-template-areas: "piece" "page";
    box-sizing: border-box;
    overflow: hidden;
}
/* a phone on its side: less for the piece, the page keeps its rows */
@media (max-height: 520px) {
    .ws-running[b-aq3nv8lzob] { --ws-cue-h: clamp(84px, 32dvh, 150px); }
}
@media (min-width: 1200px) {
    .ws-running[b-aq3nv8lzob] { --ws-cue-h: clamp(160px, 28dvh, 320px); }
}

.ws-stage[b-aq3nv8lzob] {
    grid-area: piece;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}
@media (min-width: 1200px) {
    .ws-stage[b-aq3nv8lzob] { padding: 12px 28px 0; }
}

/* ── the piece: every line of today's sitting, four in view (qsFocus.revealCurrent sizes the
   band to the line before, the line in hand and the two after; the rest scrolls) ── */
.ws-piece[b-aq3nv8lzob] {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 2px 6px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}
.ws-piece-head[b-aq3nv8lzob] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 2px 6px;
    background: var(--paper);
    font-family: var(--ui);
    font-size: 13px;
    color: var(--text-secondary);
}
.ws-mark[b-aq3nv8lzob] { letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-piece-pick:focus-visible[b-aq3nv8lzob] { outline: 2px solid var(--laurel); outline-offset: 2px; }

.ws-piece-line[b-aq3nv8lzob] { margin: 0; }
.ws-piece-gap[b-aq3nv8lzob] { height: 10px; }
.ws-piece-pick[b-aq3nv8lzob] {
    white-space: pre-line;   /* a line the page wraps breaks at the same places here */
    width: 100%;
    min-height: 32px;
    padding: 3px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-family: var(--hand);
    font-weight: var(--ink-weight, 400);
    font-size: clamp(15px, 2.2vh, 20px);
    line-height: 1.5;
    color: var(--journal-ink, var(--ink));
    white-space: pre-wrap;
    cursor: pointer;
}
.ws-piece-pick:hover[b-aq3nv8lzob] { background: var(--sheet); }
.is-done .ws-piece-pick[b-aq3nv8lzob] { opacity: .45; }
.is-ahead .ws-piece-pick[b-aq3nv8lzob] { opacity: .85; }

/* the line in hand: large, top-left, in the hand's face with its guides */
.ws-line[b-aq3nv8lzob] { padding: 4px 0 6px; }
.ws-line[b-aq3nv8lzob]  .cue { margin: 0; width: 100%; }
.ws-line[b-aq3nv8lzob]  .cue-line { width: 100%; padding: 0 8px; text-align: left; }

.ws-complete-note[b-aq3nv8lzob] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-align: center;
}
.ws-complete-note p[b-aq3nv8lzob] {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--text-secondary);
}

/* ── the place on the page ── */
.ws-running .ws-twin[b-aq3nv8lzob] {
    grid-area: page;
    position: relative;
    margin: 0;
    padding: 0 max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    min-height: 0;
    height: 100%;
    opacity: 1;
}
/* the twin inside fills this slot and puts its own controls away: page.css, "the writing session" */
@media (min-width: 1200px) {
    .ws-running .ws-twin[b-aq3nv8lzob] { padding: 0 28px 10px; }
}

/* ── the reader, kept out of sight: it reads and listens, and shows nothing here ── */
.ws-voice[b-aq3nv8lzob] { display: none; }
/* /Components/WritingPage.razor.rz.scp.css */
/* The favourite's heart (PR-2). Absolutely placed with no top: it sits where it falls in the
   flow — the first row of its entry, or the index line after it — and takes no room there,
   so the rows, the ruling and the ink do not move. Horizontally it is out in the margin. */
.j-heart[b-l1etz7q0wc] {
    position: absolute;
    /* Above the page's ink canvas; the stage corner still sits outside the book, so clicks
       are kept clear of it by pointer-events on .corner (OpenBookDesk / page.css). */
    z-index: 8;
    right: calc((var(--page-margin-x) - 6mm) / 2);
    width: 6mm;
    height: 6mm;
    margin-top: calc((var(--pitch) - 6mm) / 2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 4.6mm;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* a finger needs more than the heart: the target reaches past it without moving it */
.j-heart[b-l1etz7q0wc]::before { content: ""; position: absolute; inset: -2.5mm; }
.j-heart:hover[b-l1etz7q0wc]  .ink-heart-line { opacity: .6; }
.j-heart.is-on:hover[b-l1etz7q0wc]  .ink-heart-line { opacity: 1; }
.j-heart:focus-visible[b-l1etz7q0wc] { outline: 2px solid var(--favourite); outline-offset: 1px; }

.j-index-heart[b-l1etz7q0wc] {
    position: absolute;
    z-index: 4;
    margin-left: -1.35em;
    /* Sit in the entry's pitch row, as the poem heart does on its first line. */
    margin-top: calc(var(--pitch) * 0.18);
    font-family: var(--hand);
    font-size: calc(var(--sz) * 0.9 * 0.85 * var(--page-fit, 1));
    line-height: 0;
    pointer-events: none;
}

/* "No favourites yet" under the heading runs on to a second line rather than off the page. */
.j-index-note[b-l1etz7q0wc] { white-space: normal; cursor: default; }
.j-index-note:hover[b-l1etz7q0wc] { text-decoration: none; }

/* Remove last entry — inline at the end of the sitting's last inked line (Journals). */
.j-line-has-bin[b-l1etz7q0wc] {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.28em;
}
.j-entry-bin[b-l1etz7q0wc] {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    width: 3.4mm;
    height: 3.4mm;
    background: none;
    color: color-mix(in srgb, var(--journal-ink, #2b2a24) 55%, transparent);
    opacity: 0.55;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    vertical-align: baseline;
}
.j-entry-bin[b-l1etz7q0wc]::before {
    content: "";
    position: absolute;
    inset: -2mm;
}
.j-entry-bin:hover[b-l1etz7q0wc],
.j-entry-bin:focus-visible[b-l1etz7q0wc] {
    opacity: 0.95;
    color: #9a3b32;
    outline: none;
}
.j-entry-bin-ico[b-l1etz7q0wc] {
    display: block;
    width: 100%;
    height: 100%;
}
.page.has-ink .j-entry-bin[b-l1etz7q0wc] {
    opacity: 0.72;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Shell styles live in wwwroot/css/tokens.css because NavLink anchors are child-component
   elements that Blazor CSS isolation does not scope. */
/* /Pages/Achievements.razor.rz.scp.css */
/* My achievements: a sheet of letter paper (common.css gives every page-wrap that), with the
   stamps laid out in a grid of cards, one column on a phone and three or four on a desk. */
.ach-page[b-huz0nwcm3u] { max-width: 1180px; }

.ach-head[b-huz0nwcm3u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}
.ach-head-text[b-huz0nwcm3u] { min-width: 0; }
.ach-count[b-huz0nwcm3u] {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--text-secondary);
}
.ach-passport[b-huz0nwcm3u] { display: inline-flex; align-items: center; gap: 8px; }
.ach-soon[b-huz0nwcm3u] {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Sort and show: two quiet rows of words, the chosen one underlined in wax. */
.ach-controls[b-huz0nwcm3u] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 22px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-line);
}
.ach-seg[b-huz0nwcm3u] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ach-seg-label[b-huz0nwcm3u] {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.ach-seg-btn[b-huz0nwcm3u] {
    padding: 2px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--text-primary);
    cursor: pointer;
}
.ach-seg-btn:hover[b-huz0nwcm3u] { color: var(--wax); }
.ach-seg-btn[aria-pressed="true"][b-huz0nwcm3u] { border-bottom-color: var(--wax); color: var(--ink); font-weight: 600; }
.ach-seg-btn:focus-visible[b-huz0nwcm3u] { outline: 2px solid var(--ink); outline-offset: 2px; }

.ach-empty[b-huz0nwcm3u] { font-family: var(--serif); font-style: italic; color: var(--text-secondary); }

.ach-grid[b-huz0nwcm3u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.ach-card[b-huz0nwcm3u] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--rule-line) 80%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--letter-paper) 70%, transparent);
    transition: box-shadow .4s ease, border-color .4s ease;
}
.ach-card.is-locked .ach-name[b-huz0nwcm3u] { color: var(--text-secondary); }
/* The card asked for by ?new=: a wash of the eco yellow, fading as the flash lifts. */
.ach-card.is-new[b-huz0nwcm3u] {
    border-color: var(--eco-yellow-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eco-yellow) 45%, transparent);
}
.ach-stamp[b-huz0nwcm3u] { flex: 0 0 auto; width: 104px; height: 104px; display: grid; place-items: center; }
.ach-text[b-huz0nwcm3u] { min-width: 0; }
.ach-text p[b-huz0nwcm3u] { margin: 0; }
.ach-name[b-huz0nwcm3u] { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ach-meta[b-huz0nwcm3u] { margin-top: 2px !important; font-family: var(--ui); font-size: 12px; color: var(--text-secondary); }
.ach-rarity[b-huz0nwcm3u] { font-weight: 600; letter-spacing: .04em; }
.ach-rarity.is-rare[b-huz0nwcm3u] { color: var(--wax); }
.ach-rarity.is-legendary[b-huz0nwcm3u] { color: var(--gold); }
.ach-when[b-huz0nwcm3u], .ach-how[b-huz0nwcm3u], .ach-reward[b-huz0nwcm3u] { margin-top: 6px !important; font-family: var(--serif); font-size: .98rem; line-height: 1.3; }
.ach-when[b-huz0nwcm3u] { color: var(--ink); }
.ach-how[b-huz0nwcm3u] { color: var(--text-secondary); font-style: italic; }
.ach-reward[b-huz0nwcm3u] { font-family: var(--ui); font-size: 12px; color: var(--text-secondary); }

@media (max-width: 599px) {
    .ach-grid[b-huz0nwcm3u] { grid-template-columns: 1fr; gap: 10px; }
    .ach-stamp[b-huz0nwcm3u] { width: 88px; height: 88px; }
    .ach-stamp[b-huz0nwcm3u]  svg { width: 88px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-card[b-huz0nwcm3u] { transition: none; }
}
/* /Pages/Gift.razor.rz.scp.css */
/* On the letter (public.css .about-letter): the sender's words are typed like the rest of the
   note, the quote set in from the margin as a typist would; the poem keeps its own hand. */
.gift-from[b-hchm2xjhbh] {
    margin: 0 0 14px;
    text-align: center;
    font-family: var(--about-type, var(--serif));
    font-size: 15px;
    color: var(--text-secondary);
}

.gift-why[b-hchm2xjhbh] {
    margin: 0 auto 22px;
    max-width: 30rem;
    padding: 0 0 0 1.25rem;
    border-left: 1.5px solid color-mix(in srgb, var(--about-body, #3F3B33) 40%, transparent);
    font-family: var(--about-type, var(--serif));
}
.gift-why p[b-hchm2xjhbh] { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.gift-why footer[b-hchm2xjhbh] { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }

/* One leaf of the writer's paper, as the way in holds a piece up. */
.gift-sheet[b-hchm2xjhbh] {
    margin: 0 auto;
    width: min(100%, 30rem);
    padding: 28px 30px 32px;
    background: var(--sheet);
    border: 1px solid var(--sheet-edge);
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(43, 42, 36, .04), 0 10px 30px -18px rgba(43, 42, 36, .35);
}
.gift-written[b-hchm2xjhbh] {
    margin-bottom: 14px;
    text-align: right;
    font-family: var(--about-type, var(--serif));
    font-size: 12.5px;
    color: var(--text-secondary);
}
.gift-title[b-hchm2xjhbh],
.gift-author[b-hchm2xjhbh],
.gift-lines[b-hchm2xjhbh] { color: var(--journal-ink, var(--ink)); }
.gift-title[b-hchm2xjhbh] { text-align: center; font-size: 24px; line-height: 1.35; }
.gift-author[b-hchm2xjhbh] { text-align: center; font-size: 15px; opacity: .65; margin-top: 2px; }
.gift-lines[b-hchm2xjhbh] { margin-top: 18px; font-size: 17px; line-height: 1.75; }
.gift-line[b-hchm2xjhbh] { white-space: pre-wrap; overflow-wrap: anywhere; }

.is-own .gift-title[b-hchm2xjhbh],
.is-own .gift-author[b-hchm2xjhbh],
.is-own .gift-lines[b-hchm2xjhbh] { font-family: var(--hand, "Playwrite NZ"), cursive; }
.is-own .gift-title[b-hchm2xjhbh] { font-size: 21px; }
.is-own .gift-lines[b-hchm2xjhbh] { font-size: 15px; line-height: 2.05; }
.is-library .gift-title[b-hchm2xjhbh],
.is-library .gift-author[b-hchm2xjhbh],
.is-library .gift-lines[b-hchm2xjhbh] { font-family: var(--serif); }
.is-library .gift-lines[b-hchm2xjhbh] { font-style: italic; }

/* The quiet offer: after the poem, never before it. */
.gift-offer[b-hchm2xjhbh] {
    margin: 40px auto 8px;
    max-width: 30rem;
    padding-top: 22px;
    border-top: 1px solid var(--sheet-edge);
    text-align: center;
    color: var(--text-secondary);
}
.gift-offer-title[b-hchm2xjhbh] { margin: 0 0 8px; font-family: var(--about-type, var(--serif)); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.gift-offer-points[b-hchm2xjhbh] { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14.5px; line-height: 1.7; }
.gift-offer-sent[b-hchm2xjhbh] { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-primary); }

@media (max-width: 520px) {
    .gift-sheet[b-hchm2xjhbh] { padding: 22px 18px 26px; }
}
/* /Pages/Journey.razor.rz.scp.css */
/* Your journals as a shelf and a list: the letter sheet across the top (the lists live on
   paper, not on the hide), the bookcase's lip over an open book, and the bare mat the shelf
   lies on. The leather mat and the oak tray are OpenBookDesk's. */

/* A letter sheet across the top: toolbar and lists live on paper, not on the hide. */
.journey-chrome[b-9zg44huc88] {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-left: var(--journey-pad-gutter);
    margin-right: var(--journey-pad-gutter);
    padding: 16px 18px 18px;
    border-radius: 2px 2px 0 0;
    isolation: isolate;
    background-color: var(--letter-paper);
    background-image: var(--letter-light);
    box-shadow: var(--letter-shadow);
}

.journey-chrome[b-9zg44huc88]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--letter-make);
    background-size: var(--letter-make-size);
    mix-blend-mode: multiply;
    opacity: .7;
    pointer-events: none;
}

.journey-chrome[b-9zg44huc88]  .journey-filters {
    margin-top: 10px;
}

.journey-chrome[b-9zg44huc88]  .journey-status {
    color: var(--text-secondary);
}

.journey-chrome[b-9zg44huc88]  .journal-shelf-list {
    margin-top: 4px;
}

/* Over an open book, the bookcase's bottom shelf is just in view: a strip of the same stained
   oak, its lit top and dark front edge, between the letter sheet and the mat. A tap on it (or
   a wheel turned up over it) goes back up to the desk and the bookcase. */
.journey-shelf-lip[b-9zg44huc88] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(100% - 2 * var(--journey-pad-gutter));
    height: var(--journey-lip-h);
    margin: 0 var(--journey-pad-gutter);
    padding: 0 12px;
    border: 1px solid #3E2614;
    border-top: none;
    border-bottom: 5px solid #5C3A1F;
    border-radius: 0 0 4px 4px;
    background:
        linear-gradient(to bottom, rgba(255, 228, 190, .22), transparent 45%),
        linear-gradient(to bottom, rgba(0, 0, 0, .32), transparent 55%),
        linear-gradient(to bottom, #B88452 0, #B88452 5px, #86592F 5px, #7A5029);
    box-shadow:
        0 2px 0 rgba(255, 240, 215, .12) inset,
        0 4px 10px rgba(0, 0, 0, .32);
    cursor: pointer;
    color: color-mix(in srgb, #F3EADB 92%, #3E2614);
    font-family: var(--about-type, "Courier Prime", monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: filter .15s ease, box-shadow .15s ease;
}

.journey-shelf-lip-inner[b-9zg44huc88] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.journey-shelf-lip-chevron[b-9zg44huc88] {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid currentColor;
    opacity: .85;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}

.journey-shelf-lip-label[b-9zg44huc88] {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.journey-shelf-lip:hover[b-9zg44huc88],
.journey-shelf-lip:focus-visible[b-9zg44huc88] {
    filter: brightness(1.1);
    box-shadow:
        0 2px 0 rgba(255, 240, 215, .18) inset,
        0 5px 14px rgba(0, 0, 0, .38);
}

.journey-shelf-lip:focus-visible[b-9zg44huc88] {
    outline: 2px solid var(--laurel);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .journey-shelf-lip[b-9zg44huc88] {
        font-size: 10px;
        letter-spacing: 0.1em;
    }
    .journey-shelf-lip-label[b-9zg44huc88] { max-width: 11em; line-height: 1.2; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
    .journey-writing-pad.is-open .journey-shelf-lip-chevron[b-9zg44huc88] {
        animation: journey-lip-nudge-b-9zg44huc88 2.4s ease-in-out 3;
    }
}

@keyframes journey-lip-nudge-b-9zg44huc88 {
    0%, 100% { transform: translateY(0); opacity: .85; }
    50% { transform: translateY(-3px); opacity: 1; }
}

.journey-writing-pad-hint[b-9zg44huc88] {
    position: relative;
    z-index: 1;
    max-width: 28rem;
    margin: 0 auto 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

/* The shelf lies on the mat too, bare of leather: the desk shows through. The leather mat
   with a book open on it is OpenBookDesk's. */
.journey-writing-pad.is-shelf[b-9zg44huc88],
.journey-writing-pad.is-list-atmosphere[b-9zg44huc88] {
    position: relative;
    isolation: isolate;
    margin-left: var(--journey-pad-gutter);
    margin-right: var(--journey-pad-gutter);
    padding: 16px 16px 64px;
    border-radius: 0 0 10px 10px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    min-height: 0;
}

.journey-writing-pad.is-shelf[b-9zg44huc88]::before,
.journey-writing-pad.is-shelf[b-9zg44huc88]::after,
.journey-writing-pad.is-list-atmosphere[b-9zg44huc88]::before,
.journey-writing-pad.is-list-atmosphere[b-9zg44huc88]::after {
    content: none;
}

.journey-pad-loading[b-9zg44huc88] {
    position: relative;
    z-index: 1;
    margin: 24px var(--journey-pad-gutter) 16px;
    text-align: center;
}

[b-9zg44huc88] .journey-host-upload {
    position: fixed;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 699px) {
    .journey-writing-pad[b-9zg44huc88]  .journal-pad {
        --rail: 24px;
        --inset: 12px;
    }
}

/* Volume bin beside the open journal (index) or shut book — not in the oak tray. journal.js
   sets --beside-x / --beside-y from the cover or the fitted paper foot. */
.journey-mat-bin[b-9zg44huc88] {
    position: absolute;
    left: var(--beside-x, 0px);
    top: var(--beside-y, 0px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--on-leather);
    opacity: .55;
    cursor: pointer;
}
.journey-mat-bin svg[b-9zg44huc88] { width: 14px; height: 14px; }
.journey-mat-bin:hover:not(:disabled)[b-9zg44huc88],
.journey-mat-bin:focus-visible[b-9zg44huc88] {
    opacity: 1;
    color: var(--danger, #9a3b32);
}
.journey-mat-bin:disabled[b-9zg44huc88] { opacity: .2; cursor: default; }
.journey-mat-bin:focus-visible[b-9zg44huc88] { outline: 2px solid currentColor; outline-offset: 2px; }
/* /Pages/Stacks.razor.rz.scp.css */
/* The stacks: a reading column with a star-map alongside.
   All elements here are plain HTML, so scoped CSS reaches them. */

.stacks-page[b-wwaaax4rmp] { max-width: 1180px; padding: 40px 44px 80px; }   /* margin: the paper sheet's (common.css) */

.stacks-head[b-wwaaax4rmp] { margin-bottom: 22px; }
.stacks-bar[b-wwaaax4rmp] { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.stacks-back[b-wwaaax4rmp] { padding: 8px 14px; line-height: 1; }
.stacks-crumb[b-wwaaax4rmp] { margin-left: auto; font-style: italic; }

/* type-ahead */
.suggest-wrap[b-wwaaax4rmp] { position: relative; width: 380px; max-width: 100%; }
.suggest-pop[b-wwaaax4rmp] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(43, 42, 36, .14);
  overflow: hidden;
}
.suggest-item[b-wwaaax4rmp] {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--text-primary);
  padding: 9px 12px;
}
.suggest-item:hover[b-wwaaax4rmp] { background: var(--chip); }

/* two columns: the page, then the constellation */
.stacks-body[b-wwaaax4rmp] { display: grid; grid-template-columns: minmax(0, 720px) 270px; gap: 24px; align-items: start; }

.stacks-main[b-wwaaax4rmp] { min-width: 0; }
.stacks-facts[b-wwaaax4rmp] { margin: 6px 0 0; }
.stacks-source[b-wwaaax4rmp] { color: var(--wax); }
.stacks-section[b-wwaaax4rmp] { margin-top: 18px; }
.stacks-section .eyebrow[b-wwaaax4rmp] { margin-bottom: 8px; }
.stacks-prose[b-wwaaax4rmp] { line-height: 1.6; margin: 0 0 6px; }
.stacks-note[b-wwaaax4rmp] { margin: 4px 0 0; }

/* .chip-link lives in tokens.css — the library's wiki strip uses it too */

.stacks-rows[b-wwaaax4rmp] { display: flex; flex-direction: column; gap: 5px; }
.stacks-row[b-wwaaax4rmp] { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stacks-row-title[b-wwaaax4rmp] { font-size: 15px; }

.stacks-slip-block[b-wwaaax4rmp] { margin-top: 18px; }
.stacks-write[b-wwaaax4rmp] { margin-top: 12px; }
.poem-line-title[b-wwaaax4rmp] { font-weight: 700; }
.poem-line-byline[b-wwaaax4rmp] { color: var(--text-secondary); font-size: 15px; }

/* ── the constellation ── */
.stacks-aside[b-wwaaax4rmp] { position: sticky; top: 40px; }
.stacks-aside .eyebrow[b-wwaaax4rmp] { margin-bottom: 8px; }
.constellation[b-wwaaax4rmp] {
  position: relative;
  aspect-ratio: 268 / 240;
  background-color: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-sheet);
  overflow: hidden;
  margin-bottom: 8px;
}
.constellation svg[b-wwaaax4rmp] { display: block; width: 100%; height: 100%; }
.edge[b-wwaaax4rmp] { stroke: rgba(110, 104, 90, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.star[b-wwaaax4rmp] { fill: var(--text-secondary); cursor: pointer; }
.star:hover[b-wwaaax4rmp] { fill: var(--wax); }

.star-label[b-wwaaax4rmp], .star-centre-label[b-wwaaax4rmp] {
  position: absolute;
  transform: translateY(-50%);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ui);
  line-height: 1.2;
}
.star-label[b-wwaaax4rmp] {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 9.5px;
  color: var(--text-secondary);
  text-align: left;
}
.star-label:hover[b-wwaaax4rmp] { color: var(--wax); }
.star-centre[b-wwaaax4rmp] { fill: var(--gold); }
.star-centre-label[b-wwaaax4rmp] {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 120px;
}

@media (max-width: 1080px) {
  .stacks-body[b-wwaaax4rmp] { grid-template-columns: minmax(0, 1fr); }
  .stacks-aside[b-wwaaax4rmp] { position: static; max-width: 270px; }
}

@media (max-width: 1199px) {
  .stacks-page[b-wwaaax4rmp] { padding: 28px 28px calc(var(--dock-height, 0px) + 36px); }
}

@media (max-width: 699px) {
  .stacks-page[b-wwaaax4rmp] {
    padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(var(--dock-height, 0px) + 24px) max(16px, env(safe-area-inset-left, 0px));
  }
  .stacks-aside[b-wwaaax4rmp] { max-width: none; }
  .suggest-wrap[b-wwaaax4rmp] { width: 100%; }
}