/* Reading rooms share the entrance's illustration and clear floating panels. */
body.ui-shell.ui-reading {
    --reading-image: url('/image/hinana_day.png');
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background-image: linear-gradient(180deg, #eaf4fb14, #edf4fa55 60%, #edf4faad), var(--reading-image) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}
body.ui-shell.ui-reading.dark-mode {
    --reading-image: url('/image/hinana_night.png');
    background-image: linear-gradient(180deg, #09142214, #09142255 60%, #091422b3), var(--reading-image) !important;
}
.reading-masthead {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
    flex-shrink: 0; width: min(1320px, calc(100% - 48px)); min-height: 110px; margin: 24px auto 20px;
}
.reading-heading {
    min-width: 260px; padding: 26px 32px; border: 1px solid #ffffff80; border-radius: 4px;
    background: var(--ui-panel); box-shadow: 0 5px 24px #14283a17;
}
.reading-heading h1 { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 720; letter-spacing: -.04em; color: var(--ui-text); }
.reading-sections { display: flex; flex-wrap: wrap; gap: 6px; }
.reading-sections a {
    display: inline-flex; align-items: center; gap: 20px; min-height: 42px; padding: 10px 18px;
    border: 1px solid #ffffff80; border-radius: 3px; background: var(--ui-panel);
    color: var(--ui-text); text-decoration: none; font-size: 13px; transition: background .18s, color .18s;
}
.reading-sections a[aria-current], .reading-sections a:hover { color: var(--ui-accent); background: var(--ui-surface); }
.reading-sections a[aria-current] { box-shadow: inset 0 -2px var(--ui-accent); }
.reading-sections a.reading-write { background: var(--ui-accent); color: var(--ui-on-accent); border-color: transparent; }
body.ui-reading .ui-footer { max-width: none; margin: auto 0 0; flex-shrink: 0; border-top: 1px solid var(--ui-line); background: var(--ui-surface) !important; color: var(--ui-muted) !important; box-shadow: none !important; }
body.ui-reading .ui-footer nav { display: flex; }
body.ui-reading .ui-footer a { color: inherit; font-size: 11px; }
body.ui-reading .ui-footer a:hover { color: var(--ui-accent); }
body.ui-reading .reading-layout,
body.ui-reading .reading-blog,
body.ui-reading .reading-search {
    flex-shrink: 0; width: min(1320px, calc(100% - 48px)); max-width: none; margin: 0 auto 32px;
    border: 1px solid var(--ui-line); border-radius: 5px; background: var(--ui-surface);
    box-shadow: 0 6px 30px #14283a1a; animation: reading-panel-enter .35s ease-out both;
}
/* Archive: a list beside the existing feed, with account and theme in the shared header. */
body.ui-shell.ui-reading[data-ui-page="index"] > .reading-layout {
    display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0;
    height: calc(100svh - var(--ui-topbar-height) - 254px); min-height: 560px; overflow: hidden;
}
body.ui-reading[data-ui-page="index"] .shelf-column {
    width: auto; min-width: 0; min-height: 0; height: auto; max-height: none;
    border-right: 1px solid var(--ui-line); background: var(--ui-surface); order: initial;
}
.archive-list-heading { margin: 0; padding: 21px 20px; border-bottom: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 13px; font-weight: 600; }
body.ui-reading[data-ui-page="index"] .tweet-card { padding: 17px 18px; gap: 10px; }
body.ui-reading[data-ui-page="index"] .tweet-card.active { border-left: 3px solid var(--ui-accent); background: var(--ui-tint); }
body.ui-reading[data-ui-page="index"] .tweet-avatar { width: 34px; height: 34px; font-size: 14px; }
body.ui-reading[data-ui-page="index"] .tweet-preview { font-size: 13px; line-height: 1.65; }
body.ui-reading[data-ui-page="index"] .content-column { min-width: 0; min-height: 0; width: auto; height: auto; background: var(--ui-soft); overflow: hidden; }
body.ui-reading[data-ui-page="index"] .content-scroll-area { min-height: 0; padding: 26px; gap: 20px; overflow: auto; }
.ui-reading .archive-toolbar { align-items: center; gap: 10px !important; margin-bottom: 0 !important; }
.ui-reading .archive-toolbar form { min-width: 0; }
.ui-reading .archive-toolbar form input { width: 190px !important; }
.ui-reading .content-card { border: 1px solid var(--ui-line); border-radius: 4px; background: var(--ui-surface); box-shadow: none; }
body.ui-reading[data-ui-page="index"] .content-card { margin-bottom: 0 !important; }
.ui-reading .write-header, .ui-reading .post-header { padding: 18px 22px; background: var(--ui-surface); border-color: var(--ui-line); }
.ui-reading .write-header h2 { font-size: 15px; font-weight: 650; }
.ui-reading .write-body { padding: 20px 22px; }
.ui-reading .write-textarea { background: var(--ui-soft); border-radius: 4px; }
.ui-reading .post-author { font-size: 15px; font-weight: 650; }
.ui-reading .post-date { font-size: 11px; }
.ui-reading .post-avatar { width: 38px; height: 38px; border-width: 1px; }
.ui-reading .post-content { padding: 24px; color: var(--ui-text); font-size: 16px; line-height: 1.85; word-break: normal; overflow-wrap: anywhere; }
.ui-reading .post-content img, .ui-reading .post-content video { max-width: 100% !important; height: auto; }
.ui-reading .post-content :is(pre, table) { max-width: 100%; overflow-x: auto; }
.ui-reading .post-content pre { padding: 18px; border: 1px solid var(--ui-line); background: var(--ui-soft); font-size: 14px; }
.ui-reading .post-actions { padding: 14px 22px; background: var(--ui-surface); border-color: var(--ui-line); }
.ui-reading .post-actions .action-btn { font-size: 12px; padding: 8px 12px; background: transparent; border-color: var(--ui-line); }
.ui-reading .post-actions .action-btn.liked { color: var(--danger-color); border-color: var(--danger-color); background: rgb(239 68 68 / .06); }
.ui-reading .replies-container { padding: 22px; background: var(--ui-surface); }
.ui-reading .reply-item { border-left: 1px solid var(--ui-line); }
.ui-reading .reply-content { font-size: 14px; line-height: 1.8; word-break: normal; overflow-wrap: anywhere; }
.ui-reading .reply-meta { flex-wrap: wrap; gap: 5px 12px; font-size: 12px; }
.ui-reading .badge-admin { font-size: 9px; font-weight: 550; }
/* Blog listing: real images when present, a text row when there is no thumbnail. */
body.ui-shell.ui-reading .reading-blog { padding: 28px 36px 36px; min-height: 400px; }
.blog-filters { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px auto; gap: 10px; padding-bottom: 25px; margin-bottom: 0; border-bottom: 1px solid var(--ui-line); }
.blog-filters :is(input,select,button) { min-height: 42px; font-size: 13px; }
.blog-filters button { padding-inline: 22px; }
body.ui-reading .blog-item { display: flex; gap: 28px; height: auto; min-height: 0; margin: 0; padding: 28px 0; border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; cursor: default; transition: none; }
body.ui-reading .blog-item:hover { transform: none; box-shadow: none; }
.ui-reading .blog-thumb { display: block; align-self: flex-start; flex: 0 0 210px; width: 210px; min-width: 0; height: 140px; border-radius: 3px; background: var(--ui-soft); }
.ui-reading .blog-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ui-reading .blog-thumb:hover img { transform: scale(1.035); }
.ui-reading .blog-info { padding: 0; gap: 16px; justify-content: space-between; min-width: 0; }
.ui-reading .blog-title { margin: 0 0 9px; color: var(--ui-text); font-size: 21px; font-weight: 650; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.ui-reading .blog-title a { color: inherit; text-decoration: none; }
.ui-reading .blog-title a:hover { color: var(--ui-accent); }
.ui-reading .blog-preview { color: var(--ui-muted); font-size: 14px; line-height: 1.8; -webkit-line-clamp: 2; word-break: normal; overflow-wrap: anywhere; }
.ui-reading .blog-meta { flex-wrap: wrap; gap: 7px 18px; padding: 0; border: 0; color: var(--ui-muted); font-size: 11px; }
.ui-reading .blog-tags { margin-top: 12px; gap: 10px; }
.ui-reading .blog-tag-chip { padding: 0; border-radius: 0; background: transparent; color: var(--ui-accent); font-size: 12px; font-weight: 500; }
.ui-reading .blog-tag-chip:hover { text-decoration: underline; }
.ui-reading .pagination { gap: 5px; margin-top: 28px; }
.ui-reading .page-link { border: 1px solid var(--ui-line); border-radius: 3px !important; background: var(--ui-surface); font-size: 12px; }
/* Article pages keep the original reading, reply and editing actions. */
body.ui-shell.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) > .reading-layout { display: block; width: min(960px, calc(100% - 48px)); height: auto; min-height: 0; overflow: hidden; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .content-column { width: 100%; min-height: 0; background: var(--ui-surface); overflow: visible; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .content-scroll-area { padding: 0; overflow: visible; gap: 0; }
.ui-reading .post-back-link { display: block; padding: 18px 42px; margin: 0; border-bottom: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 12px; text-decoration: none; }
.ui-reading .post-back-link:hover { color: var(--ui-accent); }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .content-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-header { padding: 32px 42px; }
body.ui-reading[data-ui-page="blogpost"] .post-header { display: block; }
body.ui-reading[data-ui-page="blogpost"] .post-title { margin: 0 0 18px; color: var(--ui-text); font-size: clamp(24px, 3vw, 34px); font-weight: 680; line-height: 1.5; letter-spacing: -.04em; word-break: normal; overflow-wrap: anywhere; }
body.ui-reading[data-ui-page="blogpost"] .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--ui-muted); font-size: 12px; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-content { padding: 34px 42px; font-size: 17px; line-height: 1.95; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-actions { padding-inline: 42px; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .replies-container { padding: 26px 42px; }
/* Search shares the same paper surface; result excerpts remain actual source text. */
body.ui-shell.ui-reading .reading-search { padding: 28px 36px 36px; min-height: 400px; }
.ui-reading .reading-search .search { margin: 0 0 24px; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 10px; }
.ui-reading .reading-search .search :is(input,select,button) { min-width: 0; min-height: 44px; font-size: 14px; font-weight: 500; }
.ui-reading .reading-search .summary { margin: 0 0 18px; font-size: 12px; }
.ui-reading .reading-search .result { padding: 24px 0; grid-template-columns: 110px minmax(0,1fr) auto; gap: 20px; }
.ui-reading .reading-search .result h2 { margin-bottom: 9px; font-size: 18px; font-weight: 650; line-height: 1.6; }
.ui-reading .reading-search .result p { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.ui-reading .reading-search .type, .ui-reading .reading-search .date { padding-top: 7px; font-size: 11px; font-weight: 500; }
.ui-reading .reading-search .result a:hover { color: var(--ui-accent); }
.dark-mode .reading-heading, .dark-mode .reading-sections a { border-color: #7c9db04a; }
@media(max-width:1050px) {
    body.ui-shell.ui-reading[data-ui-page="index"] > .reading-layout { grid-template-columns: 230px minmax(0,1fr); }
    body.ui-reading[data-ui-page="index"] .content-scroll-area { padding: 20px; }
    .ui-reading .archive-toolbar { justify-content: space-between; }
    .ui-reading .archive-toolbar form { flex: 1 1 100%; margin: 0 !important; }
    .ui-reading .archive-toolbar form input { width: 100% !important; min-width: 0; }
}
@media(max-width:760px) {
    body.ui-shell.ui-reading { background-position: 35% top !important; }
    .reading-masthead { width: calc(100% - 32px); margin: 16px auto; min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; }
    .reading-heading { min-width: 180px; padding: 17px 22px; }
    .reading-heading h1 { font-size: 24px; }
    .reading-sections { width: 100%; gap: 5px; }
    .reading-sections a { min-height: 38px; padding: 8px 14px; font-size: 12px; gap: 8px; }
    body.ui-reading .reading-layout, body.ui-shell.ui-reading .reading-blog, body.ui-shell.ui-reading .reading-search { width: calc(100% - 32px); margin-bottom: 24px; }
    body.ui-shell.ui-reading[data-ui-page="index"] > .reading-layout { display: block; height: auto; min-height: 0; padding-top: 0 !important; }
    body.ui-reading[data-ui-page="index"] .shelf-column { display: none; }
    body.ui-reading[data-ui-page="index"] .content-column { width: 100%; overflow: visible; }
    body.ui-reading[data-ui-page="index"] .content-scroll-area { padding: 16px; overflow: visible; }
    .ui-reading .archive-toolbar select { width: auto !important; }
    .ui-reading .write-header, .ui-reading .post-header { padding: 16px; }
    .ui-reading .write-header h2 { font-size: 14px; }
    .ui-reading .write-body { padding: 16px; }
    .ui-reading .write-body .write-footer { flex-wrap: wrap; gap: 10px; }
    .ui-reading .post-content { padding: 20px 16px; font-size: 15px; }
    .ui-reading .post-actions { padding: 12px 16px; }
    .ui-reading .replies-container { padding: 16px; }
    .ui-reading .reply-meta { flex-direction: column; align-items: flex-start; }
    .ui-reading .bottom-pagination { display: block; }
    body.ui-shell.ui-reading .reading-blog, body.ui-shell.ui-reading .reading-search { padding: 20px; }
    .blog-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; padding-bottom: 20px; }
    .blog-filters input { grid-column: 1/-1; }
    .blog-filters button { grid-column: 1/-1; }
    body.ui-reading .blog-item { flex-direction: column; gap: 17px; padding-block: 24px; }
    .ui-reading .blog-thumb { flex: none; width: 100%; height: auto; aspect-ratio: 16/9; }
    .ui-reading .blog-title { font-size: 19px; }
    .ui-reading .blog-preview { font-size: 13px; }
    .ui-reading .blog-info { gap: 15px; }
    body.ui-shell.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) > .reading-layout { width: calc(100% - 32px); padding-top: 0 !important; }
    .ui-reading .post-back-link { padding: 16px 20px; }
    body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-header { padding: 24px 20px; }
    body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-content { padding: 24px 20px; font-size: 16px; line-height: 1.9; }
    body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .post-actions { padding: 15px 20px; flex-wrap: wrap; gap: 10px; }
    body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .replies-container { padding: 22px 20px; }
    .ui-reading .reading-search .search { grid-template-columns: minmax(0,1fr); }
    .ui-reading .reading-search .result { grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
    .ui-reading .reading-search .result>div:nth-child(2) { grid-column: 1/-1; grid-row: 2; }
    .ui-reading .reading-search .type { grid-row: 1; grid-column: 1; }
    .ui-reading .reading-search .date { grid-row: 1; grid-column: 2; justify-self: end; }
    .ui-reading .reading-search .result h2 { font-size: 17px; }
    .ui-reading .reading-search .result p { font-size: 13px; }
}
@keyframes reading-panel-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { body.ui-reading .reading-layout, body.ui-reading .reading-blog, body.ui-reading .reading-search { animation: none; } }
/* Clear legacy article width/background rules inside the shared paper surface. */
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .content-scroll-area { max-width: none; margin: 0; }
body.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) .content-card { width: 100%; max-width: none; }
.ui-reading .post-content { background: var(--ui-surface); }
.ui-reading .post-header { gap: 12px; flex-wrap: wrap; }
.ui-reading .post-header>.d-flex, .ui-reading .post-meta { min-width: 0; }
.ui-reading .post-author { flex-wrap: wrap; overflow-wrap: anywhere; }

.ui-reading .reading-target { outline: 1px solid var(--ui-accent); outline-offset: 2px; animation: reading-target-fade 1.8s ease-out forwards; }
@keyframes reading-target-fade { from { outline-color: var(--ui-accent); } to { outline-color: transparent; } }
@media(prefers-reduced-motion:reduce) { .ui-reading .reading-target { animation: none; outline-color: var(--ui-accent); } }
.ui-reading .archive-toolbar form button { flex: 0 0 auto; min-width: 52px; white-space: nowrap; }

/* Short entries should stay compact; the footer follows the viewport or the content. */
body.ui-reading > .ui-header { flex-shrink: 0; }
body.ui-shell.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) > .reading-layout { margin-top: 32px; }
body.ui-shell.ui-reading[data-ui-page="post"] > .reading-layout { width: min(800px, calc(100% - 48px)); }
body.ui-reading[data-ui-page="post"] .post-back-link { padding: 14px 24px; }
body.ui-reading[data-ui-page="post"] .post-header { padding: 18px 24px; }
body.ui-reading[data-ui-page="post"] .post-meta { margin-left: 0; }
body.ui-reading[data-ui-page="post"] .post-author { font-size: 14px; }
body.ui-reading[data-ui-page="post"] .post-content { padding: 22px 24px; min-height: 0; font-size: 16px; line-height: 1.8; }
body.ui-reading[data-ui-page="post"] .post-actions { padding: 12px 24px; }
body.ui-reading[data-ui-page="post"] .replies-container { padding: 20px 24px; }
@media(max-width:760px) {
    body.ui-shell.ui-reading:is([data-ui-page="post"],[data-ui-page="blogpost"]) > .reading-layout { margin-top: 20px !important; }
    body.ui-shell.ui-reading[data-ui-page="post"] > .reading-layout { width: calc(100% - 32px); }
    body.ui-reading[data-ui-page="post"] :is(.post-header,.post-content,.post-actions,.post-back-link,.replies-container) { padding-inline: 20px; }
}