/* SHANX LIVING WEBSITE v2 — sidecar companion + world drawer */

/* Keep living UI above sticky navigation without fighting it */
.living-ui{position:relative;z-index:220}

/* Companion launcher becomes the visible seed of the organism */
.living-dock{right:18px!important;bottom:18px!important;z-index:260!important}
.companion-launcher{
  border-color:color-mix(in srgb,var(--living-accent) 20%,transparent)!important;
  background:color-mix(in srgb,var(--living-surface-strong) 91%,transparent)!important;
  box-shadow:0 16px 46px color-mix(in srgb,var(--living-dark) 18%,transparent),0 0 32px var(--living-glow)!important;
  padding:7px 12px 7px 7px!important;
}
.companion-launcher-label strong{font-size:9px!important;letter-spacing:.14em!important}
.companion-launcher-label small{font-size:7.5px!important}

/* Sidecar: grows from Companion 01 instead of behaving like a modal box */
.companion-panel{
  position:fixed!important;
  z-index:250!important;
  top:92px!important;
  right:18px!important;
  bottom:84px!important;
  left:auto!important;
  width:min(365px,calc(100vw - 36px))!important;
  max-height:none!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  border:1px solid color-mix(in srgb,var(--living-accent) 18%,var(--living-line))!important;
  border-radius:30px 30px 10px 30px!important;
  background:
    radial-gradient(circle at 92% 100%,var(--living-glow),transparent 24%),
    color-mix(in srgb,var(--living-surface-strong) 95%,transparent)!important;
  box-shadow:0 30px 90px color-mix(in srgb,var(--living-dark) 24%,transparent),0 0 0 1px color-mix(in srgb,var(--living-accent) 5%,transparent)!important;
  backdrop-filter:blur(28px) saturate(1.08)!important;
  transform-origin:calc(100% - 40px) 100%!important;
  transform:translate3d(22px,26px,0) scale(.72)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease!important;
}
.companion-panel[data-open="true"]{
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* A living spine — subtle, not decorative noise */
.companion-panel:before{
  content:"";
  position:absolute;
  left:0;
  top:84px;
  bottom:28px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--living-accent),var(--living-accent-2),transparent);
  box-shadow:0 0 18px var(--living-glow);
  opacity:.55;
  animation:shanxSpine 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shanxSpine{0%,100%{transform:scaleY(.72);opacity:.35}50%{transform:scaleY(1);opacity:.82}}

.companion-panel .panel-head{
  position:sticky!important;
  top:0;
  z-index:2;
  padding:16px 17px 14px!important;
  background:color-mix(in srgb,var(--living-surface-strong) 90%,transparent)!important;
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--living-line)!important;
}
.companion-panel .panel-head-title{gap:10px!important}
.companion-panel .companion-orb{width:36px!important;height:36px!important}
.companion-panel .companion-orb:before,.companion-panel .companion-orb:after{top:14px!important}
.companion-panel .companion-orb:before{left:10px!important}.companion-panel .companion-orb:after{right:10px!important}
.companion-panel .panel-head h3{font-size:10px!important;letter-spacing:.15em!important}
.companion-panel .panel-head p{font-size:7.5px!important;letter-spacing:.10em!important}
.panel-close{width:30px!important;height:30px!important;font-size:16px!important;border-color:color-mix(in srgb,var(--living-accent) 14%,var(--living-line))!important}

.companion-body{padding:16px 18px 18px 20px!important}
.companion-greeting{
  padding:14px 14px 14px 16px!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--living-accent) 8%,var(--living-surface)),color-mix(in srgb,var(--living-accent-2) 4%,var(--living-surface)))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--living-accent) 9%,transparent)!important;
  font-size:12px!important;
  line-height:1.6!important;
}

/* Actions become pathways, not chatbot buttons */
.companion-actions{gap:0!important;margin-top:12px!important}
.companion-action{
  position:relative!important;
  min-height:52px!important;
  padding:12px 34px 12px 20px!important;
  border:0!important;
  border-bottom:1px solid var(--living-line)!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:10.5px!important;
  font-weight:700!important;
  transition:padding .18s ease,color .18s ease,background .18s ease!important;
}
.companion-action:first-child{border-top:1px solid var(--living-line)!important}
.companion-action:before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:color-mix(in srgb,var(--living-accent) 42%,transparent);
  box-shadow:0 0 0 0 var(--living-glow);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.companion-action:hover,.companion-action:focus-visible{
  padding-left:26px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--living-accent) 6%,transparent),transparent)!important;
  color:var(--living-accent)!important;
}
.companion-action:hover:before,.companion-action:focus-visible:before{
  transform:translateY(-50%) scale(1.45);
  background:var(--living-accent);
  box-shadow:0 0 16px var(--living-glow);
}
.companion-action b{font-weight:500!important;color:var(--living-muted)!important}
.companion-status{margin-top:14px!important;padding-top:12px!important;font-size:7px!important;letter-spacing:.12em!important}

/* Theme selector lives on the opposite side as a gallery of worlds */
.theme-drawer{
  position:fixed!important;
  z-index:245!important;
  top:92px!important;
  left:18px!important;
  right:auto!important;
  bottom:18px!important;
  width:min(560px,calc(100vw - 36px))!important;
  max-height:none!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  border-radius:30px 10px 30px 30px!important;
  background:color-mix(in srgb,var(--living-surface-strong) 95%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--living-accent) 14%,var(--living-line))!important;
  box-shadow:0 28px 88px color-mix(in srgb,var(--living-dark) 23%,transparent)!important;
  backdrop-filter:blur(28px) saturate(1.06)!important;
  transform-origin:44px 0!important;
  transform:translate3d(-24px,-14px,0) scale(.82)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease!important;
}
.theme-drawer[data-open="true"]{transform:translate3d(0,0,0) scale(1)!important;opacity:1!important;pointer-events:auto!important}
.theme-drawer .panel-head{position:sticky!important;top:0;z-index:2;background:color-mix(in srgb,var(--living-surface-strong) 92%,transparent)!important;backdrop-filter:blur(20px)}
.theme-drawer-body{grid-template-columns:1fr 1fr!important;gap:10px!important;padding:14px!important}
.theme-drawer .theme-card{min-height:142px!important;border-radius:20px!important;padding:14px!important}
.theme-drawer .theme-swatch{height:42px!important;margin-top:12px!important}

/* Themes on the page should feel collectible, not like admin settings */
#experience .theme-grid{gap:10px!important}
#experience .theme-card{min-height:154px!important;border-radius:20px!important;overflow:hidden!important}
#experience .theme-card:after{
  content:"ENTER WORLD →";
  display:block;
  margin-top:10px;
  font-size:7px;
  letter-spacing:.14em;
  color:var(--living-muted);
  opacity:.62;
}

/* Softer nav controls; they should not compete with main navigation */
.living-nav-action{
  padding:7px 10px!important;
  font-size:8.5px!important;
  letter-spacing:.10em!important;
  border-color:color-mix(in srgb,var(--living-accent) 12%,var(--living-line))!important;
  background:color-mix(in srgb,var(--living-surface) 72%,transparent)!important;
  box-shadow:none!important;
}
.living-nav-action:hover,.living-nav-action:focus-visible{background:color-mix(in srgb,var(--living-accent) 8%,var(--living-surface))!important;color:var(--living-ink)!important}

/* No default bright scrollbars breaking the illusion */
.companion-panel,.theme-drawer{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--living-accent) 35%,transparent) transparent}
.companion-panel::-webkit-scrollbar,.theme-drawer::-webkit-scrollbar{width:6px}
.companion-panel::-webkit-scrollbar-track,.theme-drawer::-webkit-scrollbar-track{background:transparent}
.companion-panel::-webkit-scrollbar-thumb,.theme-drawer::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--living-accent) 30%,transparent);border-radius:999px}

/* When a living panel is open, background remains visible but recedes slightly */
body.living-panel-open main{filter:saturate(.96);transition:filter .22s ease}

/* ----------------------------------------------------------------------
   INTERNATIONAL CLEANUP PASS — 22 AUG 2026
   Restraint first: clarity, accessibility, rhythm and reliable rendering.
   ---------------------------------------------------------------------- */

/* 1) Theme previews must render as actual worlds, never collapsed inline marks. */
.theme-swatch{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
#experience .theme-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  max-width:1180px;
  margin-inline:auto;
}
#experience .theme-card{
  min-height:190px!important;
  padding:18px!important;
  border:1px solid color-mix(in srgb,var(--living-ink) 9%,transparent)!important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--living-dark) 5%,transparent)!important;
}
#experience .theme-card:hover,#experience .theme-card:focus-visible{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 38px color-mix(in srgb,var(--living-dark) 8%,transparent)!important;
}
#experience .theme-swatch{height:68px!important;margin-top:18px!important;border-radius:14px!important}

/* 2) Founder / connect section: kill ornamental corners, spikes and hard dividers. */
#founder{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.045),transparent 28%),
    linear-gradient(145deg,#12372c 0%,#173d31 56%,#1b4437 100%)!important;
}
#founder::before,#founder::after,
#founder .ownership-grid::before,#founder .ownership-grid::after,
#founder .ownership-grid>div::before,#founder .ownership-grid>div::after{
  content:none!important;
  display:none!important;
}
#founder .ownership-copy{align-self:center!important}
#founder .ownership-copy h2{max-width:10ch!important}
#founder .ownership-grid{
  gap:14px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
#founder .ownership-grid>div{
  min-height:220px!important;
  padding:30px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.08)!important;
  transform:none!important;
  overflow:hidden!important;
}
#founder .ownership-grid>div:hover{
  transform:none!important;
  background:rgba(255,255,255,.052)!important;
}
#founder .ownership-grid span{display:block!important;margin-bottom:18px!important;color:#d8bd8e!important}
#founder .ownership-grid p{max-width:31ch!important;margin:0!important;color:rgba(244,249,246,.78)!important;line-height:1.72!important}
#founder .ownership-grid a{text-underline-offset:5px;text-decoration-thickness:1px}

/* 3) Remove the second floating control from the visual hierarchy for now.
      Explorer remains in source; it will return through the Companion in a later pass. */
.explorer-seed{display:none!important}

/* 4) International interaction basics. */
:where(a,button,[role="button"]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--living-accent) 70%,white)!important;
  outline-offset:3px!important;
}
.site-header nav a{font-weight:500!important;letter-spacing:.01em}
.living-nav-action{min-height:38px!important;font-weight:650!important}
.companion-launcher{min-height:54px!important}
.panel-close{min-width:36px!important;min-height:36px!important}

/* 5) Clean motion: never move structural cards just because a cursor exists. */
#founder .ownership-grid>div,.theme-drawer .theme-card{will-change:auto!important}

@media(max-width:1100px){
  #experience .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .companion-panel,.theme-drawer{top:78px!important}
  #founder .ownership-grid>div{min-height:auto!important}
}

@media(max-width:620px){
  .companion-panel{
    top:auto!important;
    right:10px!important;
    left:10px!important;
    bottom:76px!important;
    width:auto!important;
    max-height:min(66svh,620px)!important;
    border-radius:26px 26px 12px 26px!important;
  }
  .theme-drawer{
    top:74px!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    border-radius:26px 12px 26px 26px!important;
  }
  .theme-drawer-body{grid-template-columns:1fr!important}
  #experience .theme-grid{grid-template-columns:1fr!important}
  #founder .ownership-grid{grid-template-columns:1fr!important}
  #founder .ownership-grid>div{padding:24px!important;border-radius:20px!important}
  .living-nav-action{min-height:44px!important}
}

@media(max-width:390px){
  #experience .theme-grid{grid-template-columns:1fr!important}
  .companion-launcher-label{display:none!important}
  .companion-launcher{padding:7px!important;min-width:54px!important}
}

@media(prefers-reduced-motion:reduce){
  .companion-panel,.theme-drawer{transition:opacity .18s ease!important;transform:none!important}
  .companion-panel:before{animation:none!important}
  #experience .theme-card,#founder .ownership-grid>div{transform:none!important;transition:none!important}
}