/* Sakura stationery theme. Loaded after the shared layout, before custom CSS. */
:root {
    color-scheme: light;
    --main-background: #fffdf9;
    --body-background: #f7f3ee;
    --music-background: #f3f4eb;
    --primary-background: #f8efef;
    --primary-background-hover: #f0e1e3;
    --text-color: #51494b;
    --text-sub-color: #847477;
    --line: #eee3e0;
    --link: #a35e73;
    --pj-modal-background: #795866;
    --pj-modal-color: #fffaf7;
    --green: #788968;
    --modal-background: #fffdf9;
    --modal-input-background: #fffdf9;
    --sakura-accent: #ad627a;
    --sakura-pink: #edd1d9;
    --sakura-soft: #f9eff0;
    --sakura-sage: #68765b;
    --sakura-glass: rgb(255 253 249 / 94%);
    --sakura-shadow: 0 8px 32px rgb(107 74 78 / 5%);
    --sakura-serif: 'Kaiti SC', 'STKaiti', 'Yu Mincho', 'Hiragino Mincho ProN', 'Songti SC', serif;
    --bulma-text: var(--text-color);
    --bulma-title-color: var(--text-color);
    --bulma-link-text: var(--link);
}

:root.dark {
    color-scheme: dark;
    --main-background: #2b252c;
    --body-background: #211e25;
    --music-background: #30312d;
    --primary-background: #3a2e38;
    --primary-background-hover: #4b3945;
    --text-color: #e4d6dc;
    --text-sub-color: #b8a4ae;
    --line: #463741;
    --link: #e5a8bc;
    --pj-modal-background: #624956;
    --pj-modal-color: #fff5f7;
    --green: #819372;
    --modal-background: #2b252c;
    --modal-input-background: #302830;
    --sakura-accent: #e5a8bc;
    --sakura-pink: #715261;
    --sakura-soft: #342a32;
    --sakura-sage: #b4c2a0;
    --sakura-glass: rgb(43 37 44 / 95%);
    --sakura-shadow: 0 8px 32px rgb(0 0 0 / 12%);
}

body {
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans GB', 'Hiragino Kaku Gothic ProN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
    background-image: radial-gradient(var(--line) .7px, transparent .7px);
    background-size: 9px 9px;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sakura-pink); color: var(--text-color); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--sakura-accent);
    outline-offset: 4px;
}

main {
    width: calc(100% - 48px);
    margin: 28px auto 40px;
    background: transparent;
}

.content-container {
    margin-top: 100px;
    min-height: calc(100vh - 480px);
    gap: 20px;
}

/* The familiar Moments navigation, on a legible translucent paper strip. */
.top-container {
    position: relative;
    top: auto;
    flex: none;
    width: 100%;
    max-width: none;
    height: 54px;
    margin: 0 0 16px;
    padding: 0 12px;
    gap: 8px;
    color: var(--text-sub-color);
    background: var(--sakura-glass);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 3px 16px rgb(104 71 73 / 4%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.top-container.scrolled {
    top: auto;
    background: var(--sakura-glass);
    box-shadow: var(--sakura-shadow);
}

.top-container > .top-container-left,
.top-container > .top-container-right { gap: 4px; }

.top-container .tc-home,
.top-container .tc-album,
.top-container .tc-links,
.top-container .tc-edit,
.top-container .tc-setting,
.top-container .tc-sakura,
.edit-top-bar .tc-sakura {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--text-sub-color);
    cursor: pointer;
}

.tc-sakura[hidden] { display: none !important; }
.tc-sakura[aria-pressed='true'] { color: var(--sakura-accent); background: var(--sakura-soft); }
.tc-sakura[aria-pressed='false'] { opacity: .55; }
.tc-sakura:disabled { cursor: default; }
.edit-top-left { display: flex; align-items: center; gap: 8px; }
.edit-top-bar { background: var(--sakura-glass); border-color: var(--line); border-radius: 0 0 16px 16px; }

.top-container [aria-current='page'] {
    color: var(--sakura-accent);
    background: var(--sakura-soft);
}

.top-container .top-container-left > :hover,
.top-container .top-container-right > :hover {
    transform: none;
    color: var(--sakura-accent);
    background: var(--sakura-soft);
}

/* The toolbar has its own surface, so photo-luminance icon colors are unnecessary. */
.top-container[class] [data-icon] svg,
.top-container[class] .tc-sakura svg,
.top-container[class] .tc-album-create svg,
.edit-top-bar .tc-sakura svg {
    width: 21px;
    height: 21px;
    color: inherit;
    filter: none;
}

/* Cover, floating avatar and signature remain in the original Moments order. */
.header-container {
    height: 340px;
    border-radius: 24px;
    box-shadow: var(--sakura-shadow);
    background-color: var(--sakura-soft);
}

.header-container video { border-radius: inherit; }
.header-container.sakura-default-cover { background-image: url('../images/sakura-cover.svg'); }
.album-header-background { border-radius: inherit; }

.header-container > .header-info {
    bottom: -75px;
    padding: 0 28px;
}

.header-container > .header-info > .header-user { padding-right: 0; align-items: flex-end; gap: 18px; }
.header-container > .header-info > .header-user > .header-site-title { margin: 0 0 7px; color: var(--text-color); min-width: 0; overflow-wrap: anywhere; }
.header-container > .header-info > .header-user > .header-site-title > span { font-family: var(--sakura-serif); font-size: 24px; font-weight: 600; letter-spacing: .07em; }

.header-container > .header-info > .header-user > .header-avatar-link,
.header-container > .header-info > .header-user > .header-avatar-nolink {
    flex-shrink: 0;
    border: 5px solid var(--main-background);
    border-radius: 24px;
    background: var(--main-background);
    box-shadow: 0 4px 16px rgb(91 56 70 / 10%);
}

.header-container > .header-info > .header-user > .header-avatar-link > img,
.header-container > .header-info > .header-user > .header-avatar-nolink > img,
.header-logo-placeholder {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 18px;
}

.header-logo-placeholder { color: var(--sakura-accent); background: var(--sakura-soft); }
.header-logo-placeholder svg { width: 43px; height: 43px; }
.header-container > .header-info > .header-description { margin-top: 10px; padding: 0; font-size: 12px; letter-spacing: .05em; text-align: right; overflow-wrap: anywhere; }

/* Paper cards with quiet, generous typesetting. */
.post-list { gap: 18px; }
.post-item {
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--main-background);
    box-shadow: var(--sakura-shadow);
}

.post-item-left { width: 58px; flex-basis: 58px; }
.post-item-left img,
.post-detail-item .post-item-left img { width: 42px; height: 42px; border-radius: 15px; border: 1px solid var(--line); padding: 2px; background: var(--main-background); }
.post-item .post-item-right { width: calc(100% - 58px); min-width: 0; padding-bottom: 0; border-bottom: 0; }
.post-title { flex-wrap: wrap; font-size: 15px; }
.post-list .post-title,
.post-detail-item .post-title { margin-bottom: 9px; }
.post-title a { color: var(--sakura-accent); font-weight: 600; letter-spacing: .03em; }
.post-content,
.post-detail-item .post-content { font-size: 14px; line-height: 1.85; }
.post-list .post-content { margin-bottom: 12px; }
.post-content p { margin-bottom: .65em; }
.post-content p:last-child { margin-bottom: 0; }
.show_all_btn,
.hide_all_btn { display: inline-block; font-size: 13px; margin-top: 3px; }
.top-badge,
.page-badge { padding: 3px 7px; font-size: 10px; color: var(--sakura-accent); background: var(--sakura-soft); border: 1px solid var(--sakura-pink); border-radius: 5px; }
.post-position { margin: 8px 0; }
.post-position > a,
.post-position > span { color: var(--sakura-sage); font-size: 12px; }
.post-list .post-time { top: 0; margin-top: 12px; }
.post-time time { font-size: 11px; letter-spacing: .03em; }
.post-images { width: 100%; }
.post-images .grid { gap: 5px; }
.post-image,
.post-images-container > figure,
.post-image-one img,
.post-video video { border-radius: 9px; overflow: hidden; }
.post-image img { display: block; }
.post-image-one img { max-height: 340px; max-width: 100%; }

.post-list .post-time-comment,
.post-detail-article .post-time-comment { border-radius: 6px; }
.ptc-more { width: 30px; height: 22px; padding: 3px 7px; }
.ptc-more path { fill: var(--sakura-accent); }
.post-time-comment-modal { z-index: 5; box-shadow: 0 5px 16px rgb(75 47 60 / 12%); }
.post-list .post-time-comment-modal,
.post-detail-article .post-time-comment-modal { border-radius: 7px; }
.post-list .post-time-comment-modal::after,
.post-detail-article .post-time-comment-modal::after { background: rgb(255 255 255 / 20%); }
.post-comment-container { background: var(--sakura-soft); border: 1px solid var(--line); padding: 12px 14px; }
.post-list .post-comment-container,
.post-detail-article .post-comment-container { border-radius: 10px; }
.post-comment-container:not(:has(.pcc-comment-item)):not(:has(.like-users-text:not(:empty))):not(:has(.reply-form-container)) { display: none; }
.post-list .pcc-comment-item,
.post-detail-article .pcc-comment-item { line-height: 1.6; }
.pcc-comment-list > .pcc-comment-item a,
.pcc-comment-list > .pcc-comment-item span,
.pcc-like-list { font-size: 13px; }
.post-list .pcc-comment-expand,
.post-detail-article .pcc-comment-expand,
.pcc-comment-content:hover,
.pcc-comment-content:hover .pcc-comment-text { color: var(--sakura-accent); }

/* Shared editors, friends, search and albums use the same paper-and-ink palette. */
.setting-modal,
.links-modal { left: 0; max-width: none; background: rgb(61 44 55 / 28%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root.dark .setting-modal { background: rgb(20 16 23 / 55%); }
.setting-container,
:root.dark .setting-container,
.links-container,
.editor-modal-container,
.album-editor-container { background: var(--main-background); border-radius: 20px; border-color: var(--line); box-shadow: 0 20px 80px rgb(63 41 54 / 16%); }
.setting-modal-title,
.links-modal-title,
.album-page-title,
.album-header-title,
.archive-title { font-family: var(--sakura-serif); letter-spacing: .08em; }
.setting-modal-header,
.links-modal-header { background: var(--main-background); border-color: var(--line); }
.setting-tags > a,
.post-detail-tags a { border-radius: 999px; background: var(--sakura-soft); color: var(--sakura-accent); }
.setting-tags > a:hover,
:root.dark .setting-tags > a:hover { background: var(--primary-background-hover); border-color: var(--sakura-pink); color: var(--sakura-accent); box-shadow: none; transform: none; }
.setting-mode-button,
.search-form button,
:root.dark .search-form button,
.login-submit-btn,
.reply-submit-btn,
.edit-publish-btn:not(:disabled),
.login-required-btn,
.location-done-btn,
.links-primary-button { background: var(--green); border-color: var(--green); color: #fffdf9; box-shadow: none; border-radius: 10px; }
.setting-mode-button:hover,
:root.dark .setting-mode-button:hover,
.search-form button:hover,
:root.dark .search-form button:hover,
.login-submit-btn:hover,
.reply-submit-btn:hover,
.edit-publish-btn:not(:disabled):hover,
.login-required-btn:hover,
.location-done-btn:hover,
.links-primary-button:hover { background: var(--sakura-sage); border-color: var(--sakura-sage); box-shadow: none; }
.search-form input,
.login-form-group input,
.reply-form-input input,
.link-form input,
.link-form textarea { background: var(--modal-input-background); border-color: var(--line); color: var(--text-color); border-radius: 9px; }
.reply-form-container,
.post-reply-form { border-color: var(--sakura-pink); background: var(--sakura-soft); border-radius: 12px; }
.reply-form-header strong,
.post-reply-form .reply-form-header strong { color: var(--sakura-accent); }
.login-form-label svg,
.login-form-group label svg,
.visibility-option.active .visibility-icon,
.visibility-check,
.edit-status { color: var(--sakura-sage); }
input:checked + .slider { background-color: var(--green); }
.reply-form-input input:focus,
.search-form input:focus,
.login-form-group input:focus { border-color: var(--sakura-accent); box-shadow: 0 0 0 2px var(--sakura-soft); }
.reply-form-emoji-picker,
.emoji-picker-header { background: var(--main-background); border-color: var(--line); }
.emoji-tab.active { color: var(--sakura-accent); background: var(--sakura-soft); }
.link-item { border-radius: 12px; background: var(--sakura-soft); border-color: var(--line); }
.link-avatar { border-radius: 13px; }
.album-page-content,
.archive-header,
.tag-archive-albums,
.tag-archive-articles-heading { background: var(--main-background); border: 1px solid var(--line); border-radius: 18px; }
.album-page-content { padding: 28px; box-shadow: var(--sakura-shadow); }
.album-card-cover,
.album-grid-item { border-radius: 12px; }
.album-card-title { font-size: 14px; }
.album-list-grid { gap: 24px 14px; }
.album-card-meta { font-size: 11px; }
.archive-title::before { content: '❀'; color: var(--sakura-accent); }
.archive-container,
:root.dark .archive-container { background: transparent; box-shadow: none; }
.archive-post,
:root.dark .archive-post { border-radius: 14px; background: var(--main-background); border-color: var(--line); box-shadow: var(--sakura-shadow); }
.music-card,
:root.dark .music-card { border-radius: 13px; box-shadow: none; }
.music-card .media-left .image,
.music-card .media-left .image img { border-radius: 9px; }
.music-card .play-btn { color: var(--sakura-sage); background: var(--main-background); }
.music-card .play-btn svg { stroke: currentColor; }
.progress-bar { background: var(--line); border-radius: 999px; }
.moments-pagination a { border-radius: 8px; background: var(--main-background); }
.scrollload-nomore { color: var(--text-sub-color); font-family: var(--sakura-serif); font-size: 13px; letter-spacing: .1em; }
.back-to-top { background: var(--sakura-glass); color: var(--sakura-accent); border: 1px solid var(--sakura-pink); border-radius: 14px; box-shadow: var(--sakura-shadow); }
.back-to-top:hover { background: var(--sakura-soft); color: var(--sakura-accent); }
.back-to-top svg { color: inherit; }

/* Fixed to the viewport, below navigation/dialogs; petals never catch a click. */
.nihon-journal-sakura { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; user-select: none; contain: strict; }
.nihon-journal-sakura[hidden] { display: none; }
.sakura-petal { position: absolute; top: 0; left: var(--petal-x); width: var(--petal-size); height: var(--petal-size); animation: sakura-fall var(--petal-duration) var(--petal-delay) linear infinite; }
.sakura-petal::before { content: ''; display: block; width: 100%; height: 70%; border-radius: 90% 0 90% 15%; background: linear-gradient(135deg, #fbe6ec, #e8a9bd 65%, #d995ae); opacity: .7; animation: sakura-flutter var(--petal-sway) var(--petal-delay) ease-in-out infinite alternate; }
.sakura-petal:nth-child(3n)::before { opacity: .4; }
.sakura-petal:nth-child(5n)::before { background: linear-gradient(135deg, #fff7f9, #f2cfdb); }
.nihon-journal-sakura.is-paused .sakura-petal,
.nihon-journal-sakura.is-paused .sakura-petal::before { animation-play-state: paused; }

@keyframes sakura-fall {
    from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    to { transform: translate3d(var(--petal-drift), 110vh, 0) rotate(160deg); }
}

@keyframes sakura-flutter {
    from { transform: rotate(var(--petal-rotation)) rotateY(0deg); }
    to { transform: rotate(calc(var(--petal-rotation) + 65deg)) rotateY(65deg); }
}

/* Native cursor image follows the pointer without a JavaScript tracking loop. */
@media (hover: hover) and (pointer: fine) {
    html body,
    html body * { cursor: url('../images/rose-cursor.svg?v=glass-tip-3') 3 3, auto !important; }

    html body :is(textarea, input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='url'], input[type='tel'], input[type='number'], input[type='password'], [contenteditable='true'], [contenteditable='']),
    html body [contenteditable='true'] *,
    html body [contenteditable=''] * { cursor: text !important; }

    html body :disabled,
    html body [aria-disabled='true'] { cursor: not-allowed !important; }
}

/* Brief petals at the click location; also safe over dialogs and image viewers. */
.sakura-click-layer { position: fixed; inset: 0; z-index: 1200; contain: strict; overflow: hidden; pointer-events: none; user-select: none; }
.sakura-click-burst { position: absolute; width: 0; height: 0; animation: sakura-click-fade 750ms ease-out forwards; }
.sakura-click-burst::before { content: ''; position: absolute; width: 16px; height: 16px; left: -8px; top: -8px; border: 1px solid var(--sakura-pink); border-radius: 50%; animation: sakura-click-ring 750ms ease-out forwards; }
.sakura-click-petal { position: absolute; left: -4px; top: -3px; width: var(--burst-size); height: calc(var(--burst-size) * .72); border-radius: 90% 0 90% 15%; background: linear-gradient(135deg, #ffe9f1, #e8a3bd 65%, #cd7e9f); animation: sakura-click-scatter 750ms cubic-bezier(.15, .6, .3, 1) forwards; }

@keyframes sakura-click-fade {
    0%, 20% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes sakura-click-ring {
    from { transform: scale(.4); }
    to { transform: scale(3.2); }
}

@keyframes sakura-click-scatter {
    from { transform: translate(0, 0) rotate(0deg) scale(.4); }
    to { transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-turn)) scale(.9); }
}

:root.dark .sakura-default-cover { background-image: linear-gradient(rgb(42 29 46 / 38%), rgb(42 29 46 / 38%)), url('../images/sakura-cover.svg'); }
:root.dark .sakura-petal::before { opacity: .5; }

@media (max-width: 768px) {
    main { width: calc(100% - 24px); margin-top: 12px; }
    .top-container { height: 50px; margin-bottom: 12px; padding: 0 8px; border-radius: 13px; }
    .header-container { height: 310px; border-radius: 19px; }
    .header-container > .header-info { padding: 0 18px; }
    .post-item { padding: 22px 20px; border-radius: 15px; }
    .post-item-left { width: 52px; flex-basis: 52px; }
    .post-item .post-item-right { width: calc(100% - 52px); }
    .album-page-content { padding: 20px 16px; }
    .editor-modal-container,
    .album-editor-container { border-radius: 20px 20px 0 0; }
    .sakura-petal:nth-child(n + 13) { display: none; }
}

@media (max-width: 480px) {
    body { background-size: 8px 8px; }
    .top-container { padding: 0 5px; gap: 0; }
    .top-container > .top-container-left,
    .top-container > .top-container-right { gap: 0; }
    .top-container[class] [data-icon] svg,
    .top-container .tc-sakura svg { width: 19px; height: 19px; }
    .header-container { height: 282px; }
    .header-container > .header-info { bottom: -67px; padding: 0 16px; }
    .header-container > .header-info > .header-user { gap: 12px; }
    .header-container > .header-info > .header-user > .header-site-title > span { font-size: 21px; }
    .header-container > .header-info > .header-user > .header-avatar-link > img,
    .header-container > .header-info > .header-user > .header-avatar-nolink > img,
    .header-logo-placeholder { width: 64px; height: 64px; border-radius: 16px; }
    .header-container > .header-info > .header-description { font-size: 11px; }
    .content-container { margin-top: 91px; }
    .post-list { gap: 12px; }
    .post-item { padding: 20px 14px; }
    .post-item-left { width: 44px; flex-basis: 44px; }
    .post-item-left img,
    .post-detail-item .post-item-left img { width: 34px; height: 34px; border-radius: 12px; }
    .post-item .post-item-right { width: calc(100% - 44px); }
    .post-content,
    .post-detail-item .post-content { font-size: 14px; }
    .post-title { font-size: 14px; }
    .post-images .grid { gap: 3px; }
    .post-image,
    .post-images-container > figure { border-radius: 6px; }
    .post-comment-container { padding: 9px 10px; }
    .pcc-comment-list > .pcc-comment-item a,
    .pcc-comment-list > .pcc-comment-item span,
    .pcc-like-list { font-size: 12px; }
    .setting-container { border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .nihon-journal-sakura,
    .sakura-click-layer { display: none !important; }
    .sakura-petal,
    .sakura-petal::before { animation: none; }
    .top-container *,
    .header-site-title,
    .post-item,
    .back-to-top { transition: none !important; }
}