/* 紙のポケット。既存の手帳フォントと小さなアプリアイコンを使う。 */
.paper-pocket {--pocket-paper:#d8dcb9;--pocket-edge:#969d76;--pocket-ink:#45483a}
.paper-pocket.peach {--pocket-paper:#efc9b8;--pocket-edge:#c09581}
.paper-pocket.blue {--pocket-paper:#b9d7df;--pocket-edge:#7fa7b5}
.folio-reference .app-tile.paper-pocket {
 position:relative;display:block!important;isolation:isolate;overflow:visible!important;
 background:var(--pocket-paper)!important;border:1px solid var(--pocket-edge)!important;
 border-radius:5px 5px 10px 6px!important;box-shadow:1px 3px 3px #6c593b33!important;
}
.paper-pocket::before {content:"";position:absolute;inset:-5% 14% 30% 9%;z-index:-1;background:#fffbf1;transform:rotate(-5deg);border:1px solid #c8bca1;border-radius:2px}
.paper-pocket::after {content:"";position:absolute;inset:52% 0 0;z-index:0;background:var(--pocket-paper);border-top:1px dashed var(--pocket-edge);border-radius:0 0 9px 5px}
.pocket-miniatures {position:absolute;inset:8% 15% 29%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5%;overflow:hidden}
.folder-mini-icon {display:grid;place-items:center;min-width:0;min-height:0;line-height:1;font:13px sans-serif;color:var(--pocket-ink)}
.folder-mini-icon img,.folder-mini-icon svg {width:100%!important;height:100%!important;object-fit:contain}
.paper-pocket .pocket-caption {position:absolute;left:5%;right:5%;bottom:8%;z-index:1;display:block;font:clamp(9px,10cqw,14px)/1.15 var(--body);letter-spacing:0;color:var(--pocket-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pocket-empty {grid-column:1/-1;text-align:center;color:var(--pocket-edge)}
.folder-create-button {display:block;margin-top:10px;padding:10px 12px;width:100%;border:1px dashed #919872;border-radius:4px;background:#e4e7cd;color:#3f4c38;font:14px/1.4 var(--body);cursor:pointer}
.folder-create-button[hidden] {display:none}
.paper-folder-dialog {
 box-sizing:border-box;width:min(92vw,510px);max-width:92vw;max-height:88dvh;
 padding:22px;border:1px solid #baa887;border-radius:7px 10px 8px 5px;
 background:#fff8ec var(--ref-texture) center/500px;color:#413c32;
 font:15px/1.5 var(--body);box-shadow:0 15px 50px #36281d44;overflow:auto;
}
.paper-folder-dialog::backdrop {background:#493c3066;backdrop-filter:blur(3px)}
.paper-folder-dialog header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;border-bottom:1px dashed #bcac91;padding-bottom:12px}
.paper-folder-dialog h2 {font:22px/1.4 var(--body);margin:0;padding:3px 12px;background:#e6ddbc99;border-radius:2px;overflow-wrap:anywhere}
.paper-folder-dialog header small {font:12px/1.6 var(--body);margin:4px 12px;display:block}
.paper-folder-dialog button {font:14px/1.4 var(--body);color:inherit;cursor:pointer}
.paper-folder-dialog header>button {font:24px/1 sans-serif;background:transparent;border:0;min-width:40px;min-height:40px}
.folder-app-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:16px;max-height:55dvh;overflow:auto;padding:8px}
.folder-app-grid>button {display:grid;place-items:center;min-height:68px;padding:4px;border:0;background:none}
.paper-folder-dialog .folder-app-grid .app-tile {width:62px!important;height:62px!important;min-width:0!important;background:none;box-shadow:none}
.paper-folder-dialog .app-tile img,.paper-folder-dialog .app-tile svg {width:100%;height:100%;object-fit:contain}
.paper-folder-dialog footer {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px}
.paper-folder-dialog footer button {padding:9px 18px;min-height:42px;border:1px solid #b7a583;border-radius:4px;background:#fffaf0}
.paper-folder-dialog footer .folder-save-button {background:#d8dcb9;border-color:#969d76}
.folder-empty-message {grid-column:1/-1;font:14px/1.6 var(--body)}
.folder-editor {width:min(94vw,620px);max-width:94vw}
.folder-editor form {display:block;padding:0;margin:0}
.folder-editor p {font:13px/1.5 var(--body);margin:8px 0 14px}
.folder-name-row {display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px}
.folder-editor label {display:block;font:14px/1.5 var(--body)}
.folder-editor input,.folder-editor select {box-sizing:border-box;width:100%;min-width:0;padding:9px 10px;border:1px solid #c9baa1;border-radius:3px;background:#fffdf5;color:#413c32;font:16px/1.4 var(--body)}
.folder-search-label {margin:12px 0 8px}
.folder-search-label small {float:right}
.folder-app-choices {max-height:35dvh;min-height:80px;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.folder-app-choice {display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:7px;padding:7px!important;border:1px dashed #c8bda6!important;border-radius:3px;background:#fffaf080;text-align:left}
.folder-app-choice[aria-pressed="true"] {background:#dde4c8;border:1px solid #8d9d73!important}
.folder-app-choice .app-tile {width:36px!important;height:36px!important;min-width:0!important;max-width:36px!important}
.folder-app-choice>span:not(.app-tile) {font:13px/1.3 var(--body);overflow-wrap:anywhere}
.folder-app-choice>b {font:17px sans-serif;color:#596d42}
#folderEditMessage {color:#9c4935}
.paper-folder-dialog button:focus-visible,.folder-create-button:focus-visible {outline:2px solid #668894;outline-offset:2px}
@media(width < 400px) {.paper-folder-dialog{padding:15px}.folder-app-choices{grid-template-columns:1fr}.folder-app-grid{gap:12px}}
@media(prefers-reduced-motion:no-preference) {.paper-folder-dialog[open]{animation:pocket-open .16s ease-out}@keyframes pocket-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}