/* psychoSocial — Layout CSS (v1.0)
   Page scaffolding, spacing, grid/layout rules.
*/
.themeDock{ display:none; }
.themeSwitch{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.themeOpt{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  opacity:.72;
  transition:background .15s ease, transform .06s ease, opacity .15s ease, border-color .15s ease;
}
.themeOpt:hover{ opacity:.9; }
.themeOpt:active{ transform:scale(.99); }

.themeOpt.isActive{
  opacity:1;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
}

html[data-theme="light"] .themeOpt.isActive{
  border-color:rgba(0,0,0,.12);
  background:rgba(0,0,0,.06);
}

.langSwitch{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.langOpt{
  width:44px;
  height:36px;
  border-radius:13px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.72;
  transition:background .15s ease, transform .06s ease, opacity .15s ease, border-color .15s ease;
}
.langOpt:hover{ opacity:.9; }
.langOpt:active{ transform:scale(.99); }
.langOpt.isActive{
  opacity:1;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
}
html[data-theme="light"] .langOpt.isActive{
  border-color:rgba(0,0,0,.12);
  background:rgba(0,0,0,.06);
}

@media (max-width:420px){
  .langOpt{ width:42px; height:34px; border-radius:12px; }
}


@media (max-width:420px){
  .themeDock{ top:10px; right:10px; }
  .themeOpt{ width:38px; height:38px; border-radius:13px; }
}


#backBtnBottom{
  width:50px;
  height:50px;
  border-radius:17px;
  font-size:22px;
}

.pageTag{
  margin-left:2px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:17px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}


.pageTagLink{ text-decoration:none; }
.pageTagLink:visited{ color:inherit; }


.pageTag.blogTag{
  color:var(--accentGreen);
  border-color:rgba(60,255,140,.45);
  background:rgba(60,255,140,.08);
  box-shadow:0 0 0 1px rgba(60,255,140,.14) inset, 0 10px 22px rgba(0,0,0,.55);
}

.pageTag.resourcesTag{
  color:var(--accent);
  border-color:rgba(255,90,90,.55);
  background:rgba(255,70,70,.10);
  box-shadow:0 0 0 1px rgba(255,70,70,.14) inset, 0 10px 22px rgba(0,0,0,.55);
}

.pageTag.dashTag{
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 22px rgba(0,0,0,.55);
}


/* v1.13.0-alpha7 — keep BLOG/RESOURCES tag accent colors in light theme
   (base.css sets a generic .pageTag color for light; these re-apply per-tag accents).
*/
html[data-theme="light"] .pageTag.blogTag{
  color:var(--accentGreen);
  border-color:rgba(60,255,140,.35);
  /* Keep accent on text/border only (no tinted fill in light theme) */
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .pageTag.resourcesTag{
  color:var(--accent);
  border-color:rgba(255,90,90,.35);
  /* Keep accent on text/border only (no tinted fill in light theme) */
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .pageTag.dashTag{
  color:#0b0b0b;
  border-color:rgba(0,0,0,.22);
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  width:min(260px, 86vw);
  max-width:320px;
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  backdrop-filter: blur(8px);
  box-shadow:0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  
  z-index:130;
  transform:translateY(-8px) scale(.98);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}

/* v1.01 fix7 — Drawer theme inversion (same rule as home dropdown)
   Light theme -> black drawer; Dark theme -> white drawer.
*/
html[data-theme="dark"] .drawer{
  background:#000;
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .drawer .drawerLink{
  color:#f2f2f2;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] .drawer .drawerLink:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}

html[data-theme="light"] .drawer{
  background:#fff;
  border-color:rgba(0,0,0,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .drawer .drawerLink{
  color:#0b0b0b;
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
}
html[data-theme="light"] .drawer .drawerLink:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.22);
}

.drawer.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.overlay{
  position:fixed;
  inset:0;
  background:var(--menu-overlay-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:120;
}

.overlay.open{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

@media (max-width:520px){

  
  .drawer{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .drawerLink{
    background:rgba(10,10,10,.96);
  }
  .overlay{
    background:var(--menu-overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}


.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.drawerTitle{
  font-size:12px;
  margin-right:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  opacity:.85;
}

.drawerNav{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.drawerLink{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.08em;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}

.drawerLink:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}

.drawerLink:active{ transform:scale(.995); }

.drawerLink.active{
  background:rgba(255,70,70,.10);
  border-color:rgba(255,90,90,.55);
  box-shadow:0 0 0 1px rgba(255,70,70,.14) inset, 0 10px 22px rgba(0,0,0,.55);
}

.drawerLink.active span{
  color:var(--accent);
  font-weight:800;
}

.drawerMark{
  opacity:.85;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.16em;
}

.banner{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.banner img{
  width:100%;
  height:auto;
  display:block;
  will-change:transform,filter;
  animation:tremble 140ms steps(2,end) infinite;
  filter:contrast(1.05);
}

.sigilRow{
  display:flex;
  justify-content:center;
  margin:6px 0 12px;
}

.sigilImg{
  width:64px;
  height:64px;
  border-radius:18px;
  object-fit:cover;
  display:block;
  cursor:pointer;
  background:#000;
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.55);
}

.bannerRow{
  margin-top:12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}

.bannerImg{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  will-change:transform,filter;
  animation:tremble 140ms steps(2,end) infinite;
  filter:contrast(1.05);
}


.homeBrandRow{
  display:flex;
  justify-content:center;
  margin:4px 0 8px;
}
.homeBrandImg{
  height:46px;
  width:auto;
  max-width:92%;
  object-fit:contain;
  opacity:.96;
}

@media (min-width:560px){
  .bannerImg{ height:260px; }
}

@media (max-width:420px){
  .sigilImg{ width:56px; height:56px; border-radius:16px; }
  .bannerImg{ height:200px; }
}

.pageRow{
  margin-top:12px;
  position:relative;
  
  overflow:visible;
  
  z-index:auto;
}

.sectionDivider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:16px 0 14px;
  border-radius:999px;
  opacity:.75;
}

.sectionScroller{
  margin-top:12px;
  display:grid;
  gap:12px;
  max-height:236px;
  overflow:auto;
  padding-right:6px;
  overscroll-behavior:contain;
}


body[data-page="home"] .sectionScroller{
  max-height:none;
  overflow:visible;
  padding-right:0;
}


.homeMenuWide{
  width:100%;
  margin-left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.homeMenuLabel{
  font-size:20px;
  letter-spacing:.22em;
}

@media (max-width:520px){
  .homeMenuLabel{ font-size:18px; }
  .homeBrandImg{ height:42px; }
}

.homeMenuWide.pageTagAlt{
  background:var(--menu-btn-bg);
  border-color:var(--menu-btn-border);
  box-shadow:0 0 0 1px var(--menu-btn-inset) inset;
  color:var(--menu-btn-fg);
}



.homeDropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  width:100%;
  min-width:0;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--menu-panel-border);
  background:var(--menu-panel-bg);
  color:var(--menu-panel-fg);
  box-shadow:var(--menu-panel-shadow);
  opacity:0;
  transform:translateY(-8px) scale(.985);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease;
  z-index:140;
}
.homeDropdown.open{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity 160ms ease, transform 200ms ease;
}


.homeDropdown .drawerLink{
  color:var(--menu-link-fg);
  border-color:var(--menu-link-border);
  background:var(--menu-link-bg);
}
.homeDropdown .drawerLink:hover{
  background:var(--menu-link-hover-bg);
  border-color:var(--menu-link-hover-border);
}
@media (max-width:520px){
  .homeDropdown{ top:calc(100% + 8px); }
}
.homeDropdownNav{
  display:flex;
  flex-direction:column;
  gap:10px;
}


body[data-page="home"] #drawer{ display:none !important; }


.sectionScroller::-webkit-scrollbar{ width:10px; }
.sectionScroller::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:999px; }
.sectionScroller::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:999px; border:2px solid rgba(0,0,0,.35); }

.pageTagAlt{
  color:rgba(242,242,242,.92);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}

.postDisabled{
  opacity:.58;
  filter:saturate(.8);
  pointer-events:none;
}
@keyframes tremble{
  0%{ transform:translate(0,0) rotate(0deg); }
  20%{ transform:translate(-1px,1px) rotate(-0.12deg); }
  40%{ transform:translate(1px,-1px) rotate(0.10deg); }
  60%{ transform:translate(-1px,0px) rotate(0.06deg); }
  80%{ transform:translate(1px,1px) rotate(-0.08deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

.ritualStrip{
  position:relative;
  margin:14px -16px 14px -16px;
  padding:18px 10px;
  background:#fff;
  color:#000;
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
  overflow:hidden;
  will-change:transform,filter;
  animation:ritualJitter 3.2s steps(2,end) infinite;
}
@keyframes ritualJitter{
  0%,96%,100%{ transform:translate(0,0); }
  97%{ transform:translate(0.6px,-0.4px); }
  98%{ transform:translate(-0.5px,0.3px); }
  99%{ transform:translate(0.3px,0.2px); }
}
.ritualStrip::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.06) 0px,
    rgba(0,0,0,.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.12;
  mix-blend-mode:multiply;
  pointer-events:none;
  transform:translateY(0);
  animation:scanMove 1.8s linear infinite;
}
@keyframes scanMove{ 0%{ transform:translateY(0);} 100%{ transform:translateY(10px);} }
.ritualStrip::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0), rgba(0,0,0,.10));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  mix-blend-mode:multiply;
  animation:ritualFlicker 6.5s steps(1,end) infinite;
}
@keyframes ritualFlicker{
  0%,91%,100%{ opacity:0; }
  92%{ opacity:.18; }
  93%{ opacity:0; }
  94%{ opacity:.14; }
  95%{ opacity:0; }
}
.ritualInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
  z-index:1;
}
.ritualIcon{
  width:36px;
  height:36px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.25);
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.ritualIcon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.1);
}
.ritualText{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:14px;
  letter-spacing:.18em;
  line-height:1.2;
}

.posts{ margin-top:12px; display:grid; gap:12px; }
.post{
  display:block;
  text-decoration:none;
  color:var(--fg);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  border-radius:18px;
  padding:14px;
  transition:background .15s ease, transform .06s ease;
}
.post:hover{ background:rgba(255,255,255,.08); }
.post:active{ transform:scale(.995); }
.postTop{ display:flex; align-items:baseline; justify-content:flex-start; gap:12px; }
.postTitle{ margin:0; font-size:15px; letter-spacing:.02em; font-weight:700; color:var(--accent); }


/* === Desktop refinement (v1.0 / 2026-01-14)
   Blog/Resources lists: avoid nested scrolling on desktop.
   Rationale: desktop UX is better with a single natural page scroll.
   Note: HOME already disables nested scrolling globally for its dashboard sections.
*/
@media (min-width:900px){
  body[data-page="blog"] .sectionScroller.posts,
  body[data-page="resources"] .sectionScroller.posts{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}

/* Cards grid: exploit desktop width (2–3 columns). */
@media (min-width:900px){
  body[data-page="blog"] .posts,
  body[data-page="resources"] .posts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:start;
  }
}
@media (min-width:1300px){
  body[data-page="blog"] .posts,
  body[data-page="resources"] .posts{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}