/* 紙の意匠を保ち、狭い画面・夜の配色・操作領域を共通に整える。 */
.folio-reference {--folio-page-left:38px;--folio-page-right:38px}
.folio-reference .detail-view,
.folio-reference .ref-detail.is-active,
.folio-reference .ref-home.is-active,
.folio-reference .ref-book-view.is-active {
 padding-top:max(5px,env(safe-area-inset-top))!important;
 padding-bottom:max(5px,env(safe-area-inset-bottom))!important;
 padding-left:calc(var(--folio-page-left) + env(safe-area-inset-left))!important;
 padding-right:calc(var(--folio-page-right) + env(safe-area-inset-right))!important;
}
.folio-reference .ref-home.is-active {--folio-page-left:5px;--folio-page-right:5px}
.folio-reference .folio-edge-tabs {right:calc(3px + env(safe-area-inset-right))!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:none}
.folio-reference .folio-left-tabs {left:calc(3px + env(safe-area-inset-left))!important;right:auto!important}
.folio-reference .folio-edge-tabs button {flex-shrink:0}
.folio-reference :is(.detail-view,.ref-detail) .back-button {
 flex:0 0 44px;min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important;
 padding:11px!important;color:var(--ref-ink);background:#fff8ed;border:1px solid #b5a38166;
}
.folio-reference :is(button,input,textarea,select):focus-visible {outline:2px solid #517b88;outline-offset:2px}
.folio-reference .detail-view .detail-header h1 {color:var(--ref-ink)!important;overflow-wrap:anywhere}
.folio-reference .favorite-count {margin:0;font:11px/1.5 var(--body);letter-spacing:0;white-space:nowrap}
.folio-reference .favorite-library-intro,.folio-reference .photo-page-guide {font:12px/1.7 var(--body)}
.folio-reference [data-view="apps"] #favoriteShelfGrid>button {display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:64px;padding:6px 3px;gap:4px}
.folio-reference [data-view="apps"] #favoriteShelfGrid .app-tile {width:min(100%,64px)!important;height:auto!important;min-width:0!important;max-width:100%!important;aspect-ratio:1;flex:none}
.folio-reference [data-view="apps"] .app-picker-item {grid-template-columns:64px minmax(0,1fr) 28px!important;gap:8px}
.folio-reference [data-view="apps"] .app-picker-item .app-tile {width:64px!important;height:64px!important;min-width:0!important}
.folio-reference [data-view="apps"] .app-picker-item :is(strong,small) {overflow-wrap:anywhere}
.folio-reference .memo-studio {grid-template-columns:minmax(170px,.35fr) minmax(0,1fr)}
.folio-reference .memo-workspace {min-width:0}
.folio-reference .memo-workspace .text-memo textarea {box-sizing:border-box;padding:8px!important;min-width:0;resize:vertical}
.folio-reference .memo-photo {position:static;width:100%;height:220px;margin:16px 0 0;transform:none}
.folio-reference .memo-text-footer {flex-wrap:wrap;gap:10px}
.folio-reference .memo-type-controls {display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.folio-reference .memo-type-controls button {min-width:32px;min-height:32px;font:12px var(--body);padding:4px}
.folio-reference :is(.memo-mode-tabs,.memo-history-tabs,.drawing-tools,.memo-heading-actions) button {min-height:44px;font-size:13px}
.folio-reference .memo-heading-actions {margin-left:auto;gap:8px}
.folio-reference .memo-history-item {grid-template-columns:minmax(0,1fr) 44px}
.folio-reference .memo-history-item button {min-height:44px;font-size:11px}
.folio-reference .memo-history-item time {font-size:12px}
.folio-reference .drawing-tools {display:flex;gap:6px;flex-wrap:wrap}
.folio-reference .drawing-tools button {min-width:36px}
.folio-reference .drawing-memo .section-heading {flex-wrap:wrap;gap:8px}
.folio-reference .home-switch-actions button small {color:inherit;opacity:.88}
.folio-reference .symbol-strip button {color:var(--ref-ink);border-color:#b5a38188;background:#fff8ed;min-height:44px;font-size:12px}
.folio-reference .symbol-strip button.is-active {background:#edcf9a;color:#38382b}
.folio-reference .chart-stage {display:flex;flex-direction:column;background:#253b39;color:#f7efdc;border:1px solid #718078;border-radius:6px;gap:14px}
.folio-reference .chart-topline {flex:none;gap:6px 12px}
.folio-reference .chart-topline :is(span,small) {color:#c2d4cb;font-size:12px;line-height:1.6}
.folio-reference #chartCanvas {flex:1;min-height:0;height:0}
.folio-reference .chart-view .primary-small {min-height:44px;font-size:11px;color:var(--ref-ink)}
.folio-reference .ref-inline-actions {flex-wrap:wrap}
.folio-reference .ref-inline-actions button {min-height:40px!important;min-width:60px;font-size:12px!important}
.folio-reference .ref-candidate-paper .candidate-actions button {min-height:40px;font-size:12px}
.folio-reference .ref-candidate-filters button,.folio-reference .ref-candidate-footer>button {min-height:44px;font-size:12px}
.folio-reference .book-pager button {min-height:40px}
.folio-reference .ai-suggestions button {min-height:40px;font-size:12px}
.folio-reference .ai-composer textarea {font-size:16px}
.folio-reference .home-photo-pair .ref-photo {background:#fffaf1;overflow:hidden}
.folio-reference .photo-page-grid {min-height:0;align-content:start;gap:28px 16px;padding:24px 8px}
.folio-reference .photo-page-grid .large-polaroid {height:clamp(220px,32dvh,310px);min-height:0;max-width:100%}
.folio-reference .lock-card {color:#253b39}
.folio-reference .toast {color:#fff8ec;background:#4c3020;bottom:max(24px,env(safe-area-inset-bottom));max-width:calc(100vw - 32px);text-align:center;line-height:1.5}
.folio-reference dialog {box-sizing:border-box;max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
.folio-reference .weather-forecast-paper {max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}
.folio-reference .weather-forecast-header button {flex:0 0 44px;width:44px;height:44px}
.folio-reference .weather-forecast-paper footer {font-size:10px;line-height:1.5;flex-wrap:wrap}
.folio-reference .ref-message-time {break-before:avoid-column}

/* 夜のインク：古い画面の固定色が暗い紙面へ残らないようにする。 */
.folio-reference.dark :is(.detail-paper,.ref-detail-paper) {color:var(--ref-ink)}
.folio-reference.dark .detail-header :is(h1,.autosave) {color:var(--ref-ink)!important}
.folio-reference.dark :is(.detail-view,.ref-detail) .back-button {background:#41483b;color:var(--ref-ink)}
.folio-reference.dark :is(input:not([type="checkbox"]),textarea,select) {color:#f3e6cd!important;background-color:#30392f!important;border-color:#88877088}
.folio-reference.dark :is(input,textarea)::placeholder {color:#c2c4b3;opacity:1}
.folio-reference.dark :is(.memo-mode-tabs,.memo-type-controls,.memo-history-tabs,.drawing-tools,.favorite-page-switch) button {color:#f3e6cd;background:#41483b;border-color:#88877066}
.folio-reference.dark :is(.memo-mode-tabs,.memo-type-controls,.memo-history-tabs,.drawing-tools,.favorite-page-switch) button.is-active {background:#637753;color:#fff8ed}
.folio-reference.dark .memo-workspace .text-memo textarea {background-color:#30392f!important}
.folio-reference.dark .memo-heading-actions button {color:#f3e6cd;background:#41483b}
.folio-reference.dark .memo-photo span {color:#38382b}
.folio-reference.dark :is(.clear-favorite-slot,.memo-history-delete) {color:#f1b59d}
.folio-reference.dark .memo-history-item time,.folio-reference.dark .memo-history-item.is-selected time {color:#f3e6cd}
.folio-reference.dark :is(.ai-chat-sheet,.ref-ai-paper #aiMessages) {background:transparent}
.folio-reference.dark .ai-composer>div {background:#30392f;border:1px solid #88877088}
.folio-reference.dark #aiSendButton {color:#f3e6cd}
.folio-reference.dark .folio-wheel {--fw-ink:#f3e6cd;--fw-muted:#c7c1ab;--fw-paper:#414638;--fw-line:#b5a38188}
.folio-reference.dark .fw-wheel {background:radial-gradient(circle at 32% 24%,#4b5141,#353c2f);border-color:#8d927a;box-shadow:4px 6px 14px #151b1355,inset 1px 2px 4px #8d927a44}
.folio-reference.dark .folio-wheel :is(.fw-center,.fw-shortcuts button,.fw-list-switch) {border-color:#8d927a;box-shadow:2px 4px 8px #151b1333}
.folio-reference.dark .fw-list {background-image:linear-gradient(#414638ed,#414638ed),var(--ref-texture)}
.folio-reference.dark .fw-list header button {color:#38382b}
.folio-reference.dark .symbol-strip button {background:#41483b;color:#f3e6cd}
.folio-reference.dark .symbol-strip button.is-active {background:#edcf9a;color:#38382b}

@media(width < 700px), (aspect-ratio < 4/5) {
 .folio-reference {--folio-page-left:4px;--folio-page-right:35px}
 .folio-reference .detail-view>.detail-paper {padding:14px!important}
 .folio-reference .detail-view .detail-header h1 {font-size:19px!important}
 .folio-reference .favorite-library-paper .detail-header {flex-wrap:wrap}
 .folio-reference .favorite-library-paper .favorite-count {flex-basis:100%;margin-left:54px;border:0;padding:0;white-space:normal}
 .folio-reference .memo-studio {grid-template-columns:minmax(0,1fr);gap:20px}
 .folio-reference .memo-workspace {grid-row:1}
 .folio-reference .memo-archive {position:relative;top:auto;grid-row:2}
 .folio-reference .memo-archive .section-heading>span {white-space:normal}
 .folio-reference .memo-archive .empty-state {padding:14px 4px}
 .folio-reference .memo-history-list {max-height:240px}
 .folio-reference .memo-photo {width:min(100%,180px);height:180px;margin:14px auto 0}
 .folio-reference .memo-workspace .text-memo {min-height:0}
 .folio-reference .memo-workspace .text-memo textarea {height:clamp(240px,38dvh,380px)}
 .folio-reference .photo-page-grid {gap:24px 12px;padding:16px 4px}
 .folio-reference .photo-page-grid .large-polaroid {height:220px;width:100%}
 .folio-reference .chart-view .detail-header {display:grid!important;grid-template-columns:44px minmax(0,1fr)!important}
 .folio-reference .chart-view #openTradingView {grid-column:2;justify-self:start;margin:0}
 .folio-reference .chart-stage {height:calc(100dvh - 270px);min-height:280px}
 .folio-reference .weather-forecast-hero {grid-template-columns:78px minmax(0,1fr);gap:8px 16px}
 .folio-reference .weather-forecast-hero>div:nth-child(2) {grid-template-columns:auto minmax(0,1fr);align-items:center}
 .folio-reference .weather-forecast-hero b {padding:0;line-height:1.6}
 .folio-reference .weather-forecast-hero dl {grid-column:1/-1;border-top:1px solid #b5a38166}
 .folio-reference .weather-forecast-hero dl div {text-align:center}
}
@media(max-height:600px) {
 .folio-reference .folio-edge-tabs {top:max(8px,env(safe-area-inset-top));gap:2px}
 .folio-reference .folio-edge-tabs button {height:clamp(44px,14dvh,72px)!important}
}
@media(max-height:500px) {
 .folio-reference .ref-ai-paper .ai-message {padding:8px 12px!important;margin-bottom:12px}
 .folio-reference .ref-ai-paper .ai-message p {font-size:13px!important;line-height:1.6!important;orphans:2;widows:2}
 .folio-reference .ref-ai-paper .ai-composer textarea {height:44px}
}