/* V1.25 — stable header and native gallery scrolling; controls open on request. */
body.extension-active{overflow:hidden;overscroll-behavior:none}
.extension-workspace{
 position:fixed;inset:calc(var(--header-height) + var(--safe-top)) 0 calc(var(--nav-height) + var(--safe-bottom));
 display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--paper);z-index:60;
}
.extension-panel{
 display:flex;flex:0 1 auto;flex-direction:column;min-height:0;max-height:calc(100% - 100px);
 padding:12px max(var(--gutter),env(safe-area-inset-right)) 12px max(var(--gutter),env(safe-area-inset-left));
 margin:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 3px 8px #253b3205;z-index:1;
}
.extension-summary{flex:none;min-width:0;width:100%;max-width:calc(var(--content-width) - 2 * var(--gutter));margin:auto}
.extension-heading{display:flex;align-items:center;gap:12px;min-width:0}
.extension-heading h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px;flex:1;min-width:0;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:400;line-height:1.3;letter-spacing:-.2px;overflow-wrap:anywhere}
.extension-code{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:10px;letter-spacing:.04em;font-weight:600;color:var(--accent);white-space:nowrap}
.extension-heading h1>span:last-child{flex:1 1 180px;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.extension-back{display:grid;place-items:center;flex:none;width:40px;height:44px;padding:0;border:0;background:transparent;color:var(--accent)}
.extension-toggle{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;position:relative;min-width:44px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--accent);font-size:11px}
.extension-toggle .ui-icon{width:16px;height:16px}
.extension-toggle[aria-expanded=true]{background:var(--accent-soft)}
.filter-indicator{position:absolute;top:4px;right:4px;width:5px;height:5px;background:var(--accent);border-radius:50%}

.extension-panel .completionstrip{margin:7px 0 0;min-height:22px;grid-template-columns:auto minmax(28px,1fr) auto auto}
.extension-controls{display:flex;flex:0 1 auto;min-height:0;width:100%;max-width:calc(var(--content-width) - 2 * var(--gutter));margin:0 auto;overflow:hidden;visibility:visible;transition:none}
.extension-controls-clip{width:100%;min-width:0;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.extension-controls-clip::-webkit-scrollbar{display:none}
.extension-control-content{padding-top:14px;animation:page-arrive .16s var(--ease)}
.extension-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;min-width:0}
.extension-navigation button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 10px 4px 0;border:0;background:transparent;font-size:11px;color:var(--accent);white-space:nowrap}
.extension-navigation .ui-icon{width:16px;height:16px}
.extension-game{font-size:10px;color:var(--muted);overflow-wrap:anywhere;text-align:right}
.extension-panel .search{margin:0 0 9px}
.extension-panel .search input{min-height:42px;border-radius:9px;background:var(--paper);padding-top:9px;padding-bottom:9px;font-size:16px}
.extension-panel .filters{display:flex;flex-wrap:wrap;gap:4px;overflow:visible;padding:0;margin:0}
.extension-panel .filters .pill{flex:none;min-height:34px;padding:7px 9px;font-size:11px;white-space:normal}
.extension-panel .gallerytoolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.extension-panel .gallerymodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;min-width:0;max-width:340px}
.extension-panel .gallerymodes button{min-width:0;min-height:36px;padding:7px 8px;font-size:11px;gap:6px}
.extension-panel .undobutton{min-height:42px;padding:7px 4px;font-size:11px;white-space:nowrap}
.extension-gallery{
 flex:1 1 0;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;
 -webkit-overflow-scrolling:touch;overflow-anchor:none;scrollbar-width:none;
 padding:20px max(var(--gutter),env(safe-area-inset-right)) 28px max(var(--gutter),env(safe-area-inset-left));
}
.extension-gallery::-webkit-scrollbar{display:none}
.extension-gallery:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.extension-gallery>.cards,.extension-gallery>.empty,.extension-gallery>.cataloguewarning{max-width:calc(var(--content-width) - 2 * var(--gutter));margin-left:auto;margin-right:auto}
.extension-gallery>.cards{padding:0}
.cataloguewarning{color:#745a23;background:#f6f0df;padding:12px 14px;border:1px solid #e4d6b4;border-radius:10px;font-size:12px;line-height:1.6;margin:0 0 18px}
@media(min-width:720px){
 .extension-panel{padding-top:14px;padding-bottom:14px}
 .extension-control-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:12px 24px;align-items:center}
 .extension-navigation,.extension-panel .search,.extension-panel .gallerytoolbar{margin:0}
 .extension-panel .gallerytoolbar{padding:0;border:0}
 .extension-panel .gallerymodes button{font-size:12px}
 .extension-panel .filters .pill{font-size:12px}
}
@media(max-width:600px){
 .extension-heading h1{font-size:17px}
 .extension-panel .gallerymodes .ui-icon{width:14px;height:14px}
 .extension-panel .completionstrip{font-size:10px;gap:8px}
}
@media(max-width:359px){
 .extension-panel .gallerytoolbar{gap:6px}
 .extension-panel .gallerymodes button{padding:7px 5px;font-size:10px}
 .extension-panel .undobutton{font-size:10px;gap:3px}
 .extension-panel .filters .pill{padding:7px 8px;font-size:10px}
 .extension-heading h1{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.extension-controls,.extension-panel.iscompact .extension-controls,.extension-toggle svg{transition:none}}
/* V1.31: gallery geometry stays constant throughout the transition. */
.extension-panel{position:absolute;top:0;left:0;right:0;max-height:calc(100% - 100px);overflow:hidden;transform:translate3d(0,0,0);will-change:transform;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.extension-panel.iscompact{transform:translate3d(0,calc(54px - var(--panel-height)),0)}
.extension-gallery{position:absolute;inset:54px 0 0;box-sizing:border-box;z-index:0}
.extension-full{min-height:0;overflow:hidden;opacity:1;transition:opacity .24s ease}
.extension-mini{position:absolute;bottom:0;left:0;right:0;height:54px;width:100%;display:flex;align-items:center;gap:14px;padding:0 var(--gutter);border:0;background:var(--surface);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .28s ease}
.extension-mini span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:15px;font-family:Georgia,serif}
.extension-mini b{font-size:12px;font-weight:500;color:var(--accent)}
.extension-panel.iscompact .extension-full{opacity:0;pointer-events:none}
.extension-panel.iscompact .extension-mini{opacity:1;pointer-events:auto}
.extension-full .extension-controls-clip{max-height:38dvh}
.card{position:relative}
.quick-add{position:absolute;top:0;right:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;touch-action:manipulation;color:var(--ink)}
.quick-add span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--surface);border:1px solid var(--line);opacity:.9;font-size:19px;font-weight:400;line-height:1;box-shadow:0 1px 3px #0001}
.quick-add.just-added span{animation:quick-added .22s ease}@keyframes quick-added{50%{transform:scale(.88);opacity:1}}
@media(prefers-reduced-motion:reduce){.extension-panel,.extension-full,.extension-mini{transition:none}.quick-add.just-added span{animation:none}}