/* GENERATED FILE - DO NOT EDIT.
   Source: shared/travel-journal.css - run `npm run sync:shared` after editing. */

/* The travel journal (shared/travel-journal.js) — the app's map and Crew HQ, website + app (owner 2026-10-21 mock
   "Collected along the way"). Caveat + Playfair Display come with the page's fonts; the app also ships Caveat. */

.lj-viewer { position: fixed; inset: 0; z-index: 9000; display: block; padding: 0; background: #f6f0e4; background-image: radial-gradient(rgba(120, 100, 60, 0.07) 1px, transparent 1.2px); background-size: 7px 7px; overflow-y: auto; }
.lj-page { position: relative; box-sizing: border-box; min-height: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: calc(28px + var(--safe-top, 0px)) 20px calc(16px + var(--safe-bottom, 0px)); color: #2f3a4a; }
.lj-x { position: absolute; top: calc(12px + var(--safe-top, 0px)); right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.07); color: #3a3a3a; font-size: 1rem; cursor: pointer; }
.lj-head { position: relative; padding-right: 86px; }
.lj-kick { margin: 0; font: 600 0.66rem "DM Sans", system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #7b7568; }
.lj-h { margin: 6px 0 0; font: 500 2rem/1.02 "Playfair Display", Georgia, serif; color: #1d2a4a; overflow-wrap: anywhere; }
.lj-h i { color: #b5683d; }
.lj-post { display: grid; place-items: center; width: 66px; height: 66px; border: 2px solid rgba(181, 104, 61, 0.55); border-radius: 50%; color: rgba(181, 104, 61, 0.85); font: 700 0.56rem/1.3 "DM Sans", system-ui, sans-serif; letter-spacing: 0.1em; text-align: center; transform: rotate(-14deg); }
.lj-post.is-head { position: absolute; right: 0; top: 18px; }
.lj-mid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.lj-pol { position: relative; margin: 6px 0 0; padding: 9px 9px 30px; background: #fff; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.32); transform: rotate(var(--lj-rot, -2deg)); }
.lj-pol img { display: block; width: 100%; height: clamp(200px, 44dvh, 460px); object-fit: cover; background: #e8e1d2; }
.lj-pol figcaption { position: absolute; left: 12px; right: 12px; bottom: 3px; font: 500 1.1rem "Caveat", "Playfair Display", Georgia, serif; color: #6b6a62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-tape { position: absolute; z-index: 2; top: -11px; left: 22%; width: 76px; height: 22px; transform: rotate(-6deg); background: repeating-linear-gradient(45deg, rgba(242, 179, 140, 0.86) 0 8px, rgba(250, 214, 188, 0.86) 8px 16px); }
.lj-tape.is-mint { background: repeating-linear-gradient(90deg, rgba(158, 196, 170, 0.88) 0 6px, rgba(196, 222, 204, 0.88) 6px 12px); }
.lj-tape.is-two { left: auto; right: 14%; transform: rotate(8deg); }
.lj-side { display: none; }
.lj-stamp { display: block; width: 62px; height: 76px; padding: 6px; background: #fff; border: 2px dotted #d9d1c0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); transform: rotate(8deg); }
.lj-stamp span { display: grid; place-items: center; height: 100%; background: #1f3d30; color: #f6dfae; font: 700 0.56rem/1.35 "DM Sans", system-ui, sans-serif; letter-spacing: 0.08em; text-align: center; overflow: hidden; }
.lj-star { width: 38px; height: 38px; fill: #f3dc9a; stroke: #c99a2e; stroke-width: 1.6; stroke-linejoin: round; }
/* a tall photo: polaroid beside the stamp + postmark; the head's postmark steps aside */
.lj-page.is-port .lj-head { padding-right: 46px; }
.lj-page.is-port .lj-post.is-head { display: none; }
.lj-page.is-port .lj-mid { grid-template-columns: minmax(0, 70%) minmax(0, 1fr); }
/* a tall photo keeps its own shape — never squeezed or cut at the sides (owner 2026-10-21); only a very tall one loses
   a little top and bottom */
.lj-page.is-port .lj-pol img { height: auto; max-height: 56dvh; }
.lj-page.is-port .lj-side { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; }
.lj-note { position: relative; }
.lj-hand { margin: 0; font: 500 1.7rem/1.12 "Caveat", "Playfair Display", Georgia, serif; color: #2f3a4a; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.lj-note.is-long .lj-hand { font-size: 1.4rem; }
.lj-page.is-port .lj-note { padding: 6px 14px 10px 22px; background: repeating-linear-gradient(#fffdf6 0 25px, #e4dccb 25px 26px); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.24); transform: rotate(1deg); }
.lj-page.is-port .lj-note::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; border-left: 1.5px solid rgba(214, 120, 110, 0.45); }
.lj-page.is-port .lj-hand { line-height: 26px; font-size: 1.45rem; -webkit-line-clamp: 5; }
.lj-sign { position: relative; margin: 8px 4px 0 0; text-align: right; font: 500 1.5rem "Caveat", "Playfair Display", Georgia, serif; color: #b5683d; }
.lj-sign span { font: 0.9rem "DM Sans", system-ui, sans-serif; color: #c99a2e; letter-spacing: 1px; }
.lj-acts { display: flex; justify-content: flex-end; gap: 6px; }
.lj-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid #d9d1c0; background: rgba(255, 253, 246, 0.85); color: #1f3d30; font: 700 0.76rem "DM Sans", system-ui, sans-serif; cursor: pointer; }
.lj-act.is-pri { background: #1f3d30; border-color: #1f3d30; color: #fff; }
.lj-act svg { width: 15px; height: 15px; }
.lj-act:disabled { opacity: 0.6; }
.lj-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid #d9d1c0; font: 600 0.62rem "DM Sans", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #8a857a; }
.lj-nav { display: inline-flex; align-items: center; gap: 6px; }
.lj-nav b { font-weight: 600; }
.lj-step { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.08); color: #3a3a3a; cursor: pointer; }
.lj-step svg { width: 18px; height: 18px; }
/* the mock's doodles: a star beside the note (a wide photo), a dotted squiggle by the signature */
.lj-note { padding-right: 0; }
.lj-page.is-land .lj-note { padding-right: 46px; }
.lj-doodle-star { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; fill: #f3dc9a; stroke: #c99a2e; stroke-width: 1.6; stroke-linejoin: round; }
.lj-page.is-port .lj-doodle-star { display: none; }
.lj-squiggle { position: absolute; left: 0; top: 50%; width: 96px; height: 20px; margin-top: -8px; fill: none; stroke: #9ec4aa; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; }
.lj-page.is-port .lj-squiggle { display: none; }
/* a memory with no photo: its note on a big lined card */
.lj-page.is-note .lj-mid { display: none; }
.lj-page.is-note .lj-note { padding: 14px 16px 14px 26px; background: repeating-linear-gradient(#fffdf6 0 29px, #e4dccb 29px 30px); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.24); transform: rotate(1deg); margin-top: 10px; }
.lj-page.is-note .lj-note::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 1.5px solid rgba(214, 120, 110, 0.45); }
.lj-page.is-note .lj-hand { line-height: 30px; -webkit-line-clamp: 12; }
.lj-page.is-note .lj-doodle-star { top: -26px; }
.lj-cap { margin: 8px 0 0; font: 500 1.1rem "Caveat", "Playfair Display", Georgia, serif; color: #6b6a62; }
.lj-page.is-note .lj-note { min-height: 42vh; display: flex; flex-direction: column; justify-content: center; }
/* stars only (no photo, no note): the stars big on the card — nothing written for you */
.lj-bigstars { margin: 0; text-align: center; font-size: 2.6rem; letter-spacing: 6px; color: #c99a2e; }
.lj-page.is-note .lj-bigstars + .lj-cap { text-align: center; }
/* "📖 View memories (3)" under a place's card in the day view (owner 2026-10-26: memories on each place; web + app) */
/* inside the stop card (owner 2026-10-26), under its lines */
.nu-agc-body > .lj-stop-mem { align-self: flex-start; justify-self: start; width: auto; margin-top: 6px; }
.lj-stop-mem { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #ddd0b8; border-radius: 999px; background: #fffaf0; color: #34468c; font: 600 13px/1.3 "DM Sans", system-ui, sans-serif; cursor: pointer; }
.lj-stop-mem:hover { background: #f6ecd6; }
.lj-stop-mem:focus-visible { outline: 2px solid #34468c; outline-offset: 2px; }