/* Atlas Detail — page styles */
.atlas-detail h1{ margin-bottom:.75rem; color:#f8fafc }
.atlas-detail .controls{ margin:.5rem 0 1rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.atlas-detail .btn{ display:inline-block; padding:6px 12px; border-radius:6px; border:1px solid #d1d5db; text-decoration:none; font-weight:600 }
.atlas-detail .btn-primary{ background:#111827; color:#f3f4f6; border-color:#1f2937 }
.atlas-detail .btn-ghost{ background:#ffffff; color:#111827 }
.atlas-detail .img-wrap{ text-align:center }
.atlas-detail .img-wrap img{ max-width:100%; height:auto; width:100% }
.atlas-detail .desc{ margin-top:1rem; color:#e2e8f0 }

.series-switcher{ margin:1.25rem 0; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.6rem }
.series-switcher__label{ font-weight:600; color:#1e293b; flex:0 0 auto }
.series-buttons{ display:flex; flex-wrap:wrap; gap:.5rem }
.series-buttons .series-btn{ flex:0 0 auto }
.series-buttons--scroll{ display:flex; flex-wrap:nowrap; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:.5rem 0; scroll-snap-type:x mandatory; flex:1 1 auto; width:auto; max-width:100% }
.series-buttons--scroll:focus{ outline:2px solid rgba(59,130,246,0.6); outline-offset:4px }
.series-buttons--scroll::-webkit-scrollbar{ height:6px }
.series-buttons--scroll::-webkit-scrollbar-track{ background:transparent }
.series-buttons--scroll::-webkit-scrollbar-thumb{ background:#555; border-radius:3px }
.series-buttons--scroll .series-btn{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; scroll-snap-align:start; white-space:nowrap }
html.theme-dark .series-switcher__label{ color:#e2e8f0 }
html.theme-dark .series-buttons--scroll::-webkit-scrollbar-thumb{ background:rgba(148,163,184,0.35) }
html.theme-dark .series-buttons--scroll:focus{ outline-color:rgba(125,211,252,0.6) }


/* Dark adjustments */
html.theme-dark .atlas-detail h1,
html.theme-dark .atlas-detail p,
html.theme-dark .atlas-detail .desc{ color:#e5e7eb }
html.theme-dark .atlas-detail .btn-ghost{ background:#0f1115; color:#e5e7eb; border-color:#374151 }
html.theme-dark .atlas-detail .btn-primary{ background:#10b981; color:#0b1020; border-color:#059669 }

/* Dim theme for detail (when site is light) */
html.theme-dark .site-header{ background:#111a22; box-shadow:0 6px 12px -8px rgba(0,0,0,.55) }
html.theme-dark .links a{ color:#e4ebf2 }
html.theme-dark .brand-title{
  color:#f1f5f9 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
html.theme-dark .icon-btn{ background:#223140; border-color:#314457; color:#F1F5F9 }
html.theme-dark .icon-btn:hover{ background:#2A3A48; border-color:#3b4e61; color:#ffffff }
html.theme-dark .atlas-detail .btn-ghost{ background:#223140; color:#f1f5f9; border-color:#314457 }
html.theme-dark .atlas-detail .btn-primary{ background:#10b981; color:#0b1020; border-color:#059669 }

/* Search bar margin on detail */
#atlas-search{ margin:8px 0 16px }

/* Viewer modal */
#viewerModal{ position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:4000; display:none }
#viewerInner{ position:absolute; inset:4vh 3vw; background:#0f1115; border:1px solid #1f2937; border-radius:10px; display:flex; flex-direction:column; max-width:100vw; max-height:100vh }
#viewerBar{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid #1f2937; color:#e5e7eb }
#viewerBar .viewer-header{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto }
.viewer-series--scroll{ display:block; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:.35rem 0; max-width:100%; white-space:nowrap; scroll-snap-type:x proximity; touch-action:pan-x; cursor:grab }
.viewer-series--scroll.is-dragging{ cursor:grabbing }
.viewer-series--scroll:focus{ outline:2px solid rgba(59,130,246,0.6); outline-offset:4px }
.viewer-series--scroll::-webkit-scrollbar{ height:6px }
.viewer-series--scroll::-webkit-scrollbar-track{ background:transparent }
.viewer-series--scroll::-webkit-scrollbar-thumb{ background:rgba(148,163,184,0.45); border-radius:3px }
.viewer-series--scroll .series-btn{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; font-size:.85rem; margin-right:.5rem; scroll-snap-align:start; white-space:nowrap }
.viewer-series--scroll .series-btn.is-active{ background:#0b8f67; border-color:#0a6d4e; color:#e6fff7; box-shadow:inset 0 1px 2px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.16); filter:saturate(0.85) }
.viewer-series--scroll .series-btn:last-child{ margin-right:0 }
#viewerCanvas{ position:relative; flex:1 1 auto; overflow:auto; background:#0b0f1a; cursor:grab; -webkit-overflow-scrolling:touch; touch-action: pan-x pan-y }
#viewerCanvas.grabbing{ cursor:grabbing }
#viewerImg{ display:none }
#osdViewer{ width:100%; height:100%; display:none }
#viewerControls{ display:flex; justify-content:center; gap:10px; padding:10px 12px; border-top:1px solid #1f2937; background:#0f1115; flex-wrap:wrap }
.vbtn{ padding:10px 14px; border-radius:8px; border:1px solid #374151; background:#111827; color:#e5e7eb; font-weight:700; cursor:pointer; min-width:44px; min-height:44px }
.vbtn:hover{ background:#1f2937 }
#zoomLabel{ min-width:64px; text-align:center; display:inline-flex; align-items:center; justify-content:center }
@media (max-width: 600px){ #viewerInner{ inset:10px } #viewerBar{ padding:8px } }

@media (max-width: 640px){
  .series-switcher{ flex-wrap:nowrap; gap:.5rem }
  .series-switcher__label{ white-space:nowrap }
  .series-buttons--scroll{ flex:1 1 0%; min-width:0 }
}
@supports (padding: max(0px)){ #viewerControls{ padding-bottom:max(10px, env(safe-area-inset-bottom)) } }
@media (prefers-color-scheme: dark){
  #viewerInner{ background:#ffffff; border-color:#e5e7eb }
  #viewerBar{ border-color:#e5e7eb; color:#111827 }
  #viewerCanvas{ background:#f8fafc }
  #viewerControls{ border-color:#e5e7eb; background:#ffffff }
  .vbtn{ background:#ffffff; color:#111827; border-color:#d1d5db }
  .vbtn:hover{ background:#f3f4f6 }
}

/* Search bar layout on detail */
#atlas-search .search-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
#atlas-search .search-input-wrap{ position:relative; flex:1 1 520px; min-width:240px }
#atlas-search .search-input-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#64748b; opacity:.9; pointer-events:none }
#atlas-search input[type="search"]{ width:100%; height:48px; padding:10px 12px 10px 42px; border-radius:12px; border:2px solid #cbd5e1; background:#ffffff; color:#0f172a; box-shadow:0 2px 8px rgba(0,0,0,.05); font-weight:600 }
#atlas-search input[type="search"]::placeholder{ color:#64748b; font-weight:500 }
#atlas-search input[type="search"]:focus{ outline:none; border-color:#0d6efd; box-shadow:0 0 0 4px rgba(13,110,253,.18) }
#atlas-search button{ height:48px; padding:0 14px; border-radius:12px; border:2px solid #cbd5e1; background:#f8fafc; color:#0f172a; font-weight:700 }
#atlas-search .results-meta{ margin-top:8px; font-size:.95rem }
html.theme-dark #atlas-search .search-input-wrap svg, html.theme-dark #atlas-search .search-input-wrap svg{ color:#93a4b8 }
html.theme-dark #atlas-search input[type="search"], html.theme-dark #atlas-search input[type="search"]{ background:#0f141b; color:#e5e7eb; border-color:#475569; box-shadow:0 2px 10px rgba(0,0,0,.35) }
html.theme-dark #atlas-search input[type="search"]::placeholder, html.theme-dark #atlas-search input[type="search"]::placeholder{ color:#94a3b8 }
html.theme-dark #atlas-search input[type="search"]:focus, html.theme-dark #atlas-search input[type="search"]:focus{ border-color:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.22) }
html.theme-dark #atlas-search button, html.theme-dark #atlas-search button{ background:#111827; color:#e5e7eb; border-color:#475569 }
.atlas-search-actions{ margin-top:14px; display:flex; justify-content:flex-start }
.atlas-list-btn{ font-size:.9rem; }

/* Atlas collection overlay */
.atlas-list-overlay{ position:fixed; inset:0; background:rgba(9,15,25,0.82); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding:6vh 4vw; z-index:4200; overflow:auto; }
.atlas-list-overlay[hidden]{ display:none }
.atlas-list-panel{ width:min(1080px,100%); max-height:88vh; border-radius:18px; border:1px solid rgba(148,163,184,0.28); box-shadow:var(--atlas-shadow-soft-dark); background:rgba(15,23,42,0.9); display:flex; flex-direction:column; overflow:hidden; color:#e2e8f0; }
.atlas-list-header{ padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(148,163,184,0.28); }
.atlas-list-header h2{ margin:0; font-size:1.35rem; font-weight:700; }
.atlas-list-close{ width:40px; height:40px; border-radius:999px; border:1px solid rgba(148,163,184,0.35); background:transparent; color:inherit; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.atlas-list-close:hover{ background:rgba(148,163,184,0.18); }
html.theme-dark .atlas-list-close:hover,
html.theme-dark .atlas-list-close:hover{ background:rgba(71,85,105,0.36); }
.atlas-list-body{ padding:0 24px 24px; overflow:hidden; }
.atlas-list-content{ display:block; max-height:calc(88vh - 86px); overflow:auto; padding-right:6px; }
.atlas-list-content p{ margin:16px 0; font-size:.95rem; }
.atlas-list-content .atlas-page{ padding:0; }
.atlas-list-content .atlas-page .page-title{ color:#f3f7ff; }
.atlas-list-content .atlas-page .lead{ color:rgba(212,224,244,0.92); }
html.theme-dark .atlas-list-content .atlas-page .page-title,
html.theme-dark .atlas-list-content .atlas-page .page-title,
html.theme-dark .atlas-list-content .atlas-page .page-title{ color:#f3f7ff; }
html.theme-dark .atlas-list-content .atlas-page .lead,
html.theme-dark .atlas-list-content .atlas-page .lead,
html.theme-dark .atlas-list-content .atlas-page .lead{ color:rgba(212,224,244,0.92); }
.atlas-list-content .lead__hint{ display:block; font-weight:600; margin-bottom:.35rem; }
.atlas-list-content .atlas-page > *:first-child{ margin-top:0; }
.atlas-list-content .atlas-page .atlas-category{ margin-top:24px; }
.atlas-list-content .atlas-page h2,
.atlas-list-content .atlas-page h3{ color:inherit; }
.atlas-list-error{ color:#dc2626; font-weight:600; }
@media (max-width: 720px){
  .atlas-list-overlay{ padding:4vh 3vw; }
  .atlas-list-body{ padding:0 18px 18px; }
  .atlas-list-header{ padding:16px 18px; }
}

/* Atlas content editor */
.atlas-detail .desc{ position:relative }
.atlas-edit-trigger{ margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:4px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(17,24,39,0.12); background:#111827; color:#f3f4f6; cursor:pointer; box-shadow:0 6px 16px -12px rgba(15,23,42,0.4); transition:transform .2s ease, box-shadow .2s ease; }
.atlas-edit-trigger svg{ width:22px; height:22px }
.atlas-edit-trigger:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(15,23,42,0.45) }
html.theme-dark .atlas-edit-trigger{ background:#10b981; color:#0b1020; border-color:rgba(15,185,129,0.2); box-shadow:0 8px 18px -12px rgba(16,185,129,0.45) }
html.theme-dark .atlas-edit-trigger:hover{ box-shadow:0 10px 22px -12px rgba(16,185,129,0.55) }

.atlas-editor-overlay{ position:fixed; inset:0; z-index:4600; background:rgba(9,13,24,0.7); display:flex; align-items:flex-start; justify-content:center; padding:5vh 3vw; overflow:auto; backdrop-filter:blur(6px); }
.atlas-editor-overlay[hidden]{ display:none }
.atlas-editor__panel{ width:min(880px, 100%); background:rgba(248,250,252,0.98); color:#0f172a; border-radius:18px; border:1px solid rgba(148,163,184,0.28); box-shadow:var(--atlas-shadow-soft); padding:24px; display:flex; flex-direction:column; gap:20px; }
html.theme-dark .atlas-editor__panel{ background:rgba(15,23,42,0.94); color:#e2e8f0; border-color:rgba(148,163,184,0.34); box-shadow:var(--atlas-shadow-soft-dark); }

.atlas-editor__header{ display:flex; justify-content:space-between; align-items:center; gap:16px }
.atlas-editor__header h2{ margin:0; font-size:1.35rem; font-weight:700 }
.atlas-editor__close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background:transparent;
  color:inherit;
  font-size:1.4rem;
  cursor:pointer;
}
.atlas-editor__close:hover{ background:rgba(148,163,184,0.16) }
html.theme-dark .atlas-editor__close:hover,
html.theme-dark .atlas-editor__close:hover{ background:rgba(71,85,105,0.32) }

.atlas-editor__field{ display:flex; flex-direction:column; gap:8px }
.atlas-editor__field textarea{ width:100%; min-height:110px; border-radius:12px; border:1px solid rgba(148,163,184,0.45); padding:10px 12px; font-size:0.95rem; background:#ffffff; color:inherit; }
html.theme-dark .atlas-editor__field textarea,
html.theme-dark .atlas-editor__field textarea{ background:rgba(15,23,42,0.85); border-color:rgba(148,163,184,0.4); color:#e2e8f0 }
.atlas-editor__hint{ font-size:0.8rem; color:rgba(100,116,139,0.9); }
html.theme-dark .atlas-editor__hint,
html.theme-dark .atlas-editor__hint{ color:rgba(203,213,225,0.78) }

.atlas-editor__actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:10px }
.atlas-editor__btn{ min-width:140px; padding:10px 16px; border-radius:999px; border:1px solid rgba(148,163,184,0.4); font-weight:600; cursor:pointer; font-size:0.95rem }
.atlas-editor__btn--ghost{ background:transparent; color:inherit }
.atlas-editor__btn--ghost:hover{ background:rgba(148,163,184,0.16) }
.atlas-editor__btn--primary{ background:#111827; color:#f8fafc; border-color:#1f2937 }
.atlas-editor__btn--primary:hover{ background:#1f2937 }
html.theme-dark .atlas-editor__btn--primary,
html.theme-dark .atlas-editor__btn--primary{ background:#10b981; color:#0b1020; border-color:#059669 }
html.theme-dark .atlas-editor__btn--primary:hover,
html.theme-dark .atlas-editor__btn--primary:hover{ background:#0f9a70 }

.atlas-editor__status{ min-height:20px; font-size:0.9rem; color:rgba(71,85,105,0.95); }
.atlas-editor__status--error{ color:#dc2626; }
.atlas-editor__status--success{ color:#047857; }
html.theme-dark .atlas-editor__status,
html.theme-dark .atlas-editor__status{ color:rgba(191,219,254,0.82) }
html.theme-dark .atlas-editor__status--error,
html.theme-dark .atlas-editor__status--error{ color:#f87171 }
html.theme-dark .atlas-editor__status--success,
html.theme-dark .atlas-editor__status--success{ color:#34d399 }

.atlas-editor-overlay .rt-toolbar{ position:sticky; top:0; z-index:1; border-radius:14px 14px 0 0 }
.atlas-editor-overlay .rt-editor{ min-height:220px; padding:14px; border-radius:0 0 14px 14px; border:1px solid rgba(148,163,184,0.35); background:#ffffff; color:#0f172a; }
html.theme-dark .atlas-editor-overlay .rt-editor,
html.theme-dark .atlas-editor-overlay .rt-editor{ background:rgba(15,23,42,0.85); color:#e2e8f0; border-color:rgba(148,163,184,0.4) }

@media (max-width: 768px){
  .atlas-editor__panel{ padding:20px 18px; gap:16px }
  .atlas-editor__actions{ flex-direction:column; align-items:stretch }
  .atlas-editor__btn{ width:100% }
  .atlas-edit-trigger{ width:40px; height:40px }
}
